I am BARRY HESS > Blog

Syntax Highlighting With WordPress and Markdown

When I started frequently publishing blog posts that contained code, I immediately searched for a syntax highlighting plugin to WordPress. I found a pretty good one rather easily in SyntaxHighlighter. It worked well and was fairly intuitive.

Then I realized that I would blog more if I used the wonderful TextMate to make blogging quick and easy. Along with that came the adoption of a convenient markup language, called Markdown. Using Markdown in TextMate was fairly straightforward. Implementing Markdown on my blog was also easy with the PHP Markdown plugin.

Life was good.

SyntaxHighlighter with Markdown causes problems

Life was good until I realized the PHP Markdown plugin and and the SyntaxHighlighter plugins conflict with each other. In a phrase, SyntaxHighlighter was broken by PHP Markdown’s parsing of posts.

Here’s the problem. SyntaxHighlighter’s syntax is pretty customized. The opening definition of code to be highlighted is [source:language]. Well, when Markdown goes through the post to translate all its clever shortcuts into HTML, it doesn’t really recognize [source:language] as anything special. Markdown proceeds to markup everything within the code block. I realized getting SyntaxHighlighter and Markdown to play nice together would be difficult.

Dean’s Code Highlighter works with Markdown

Enter, stage left, an alternative code highlighting plugin, Dean’s Code Highlighter. Dean’s makes use of the GeSHi General Syntax Highlighter to do its work. Why does Dean’s “just work” with Markdown? It’s the clever syntax.

Dean’s makes use of the basic HTML <code> . Markdown knows to stay far, far away from <pre> tags. It leaves your code blocks alone to be formatted by Dean’s default CSS. And naturally you’re free to update that as you see fit.

The nice side-effect of using a plain old <pre> tag is that Dean’s should degrade nicely if the plugin is ever inadvertently uninstalled. The code may not be highlighted all pretty, but at least it will be in a fixed-width font and somewhat readable.

As you can see, the output looks nice.