Syntax-highlighted Markdown Blocks using Prettify in Wordpress

Nick and I have been playing with WordPress on the test site lately. I wanted to implement a Stack Overflow style Markdown input with syntax highlighting. This can be quickly accomplished by activating MarkItUp!, PHP Markdown, Prettify for WordPress, and (optionally) ThemeKit.

With this, you can create code blocks in the standard Markdown way: indenting with four spaces:

This is [Markdown](http://michelf.com/projects/php-markdown/).

    // And this is code
    int i = 0;

End of `code` region.

This works well, but doesn't add syntax highlighting to code blocks. Instead, you have to enter HTML code into your Markdown, manually specifying class="prettyprint". In my mind, this defeats the elegance and simplicity of Markdown.

This is [Markdown](http://michelf.com/projects/php-markdown/).

<pre class="prettyprint">
<code>
  // And this is code
  int i = 0;
</code>
</pre>

End of `code` region.

Ick. Fortunately, the fix is very simple: edit wp-content/plugins/markdown.php to automatically add the "prettyprint" CSS class to preformatted code blocks. If you're in a hurry, download my edited copy. Otherwise, open the file a text editor and find line 1105:

$codeblock = "<pre><code>$codeblock\n</code></pre>";

Add class="prettyprint" to it:

$codeblock = "<pre class=\"prettyprint\"><code>$codeblock\n</code></pre>";

Save it and reload your pages. All code blocks should now automatically have syntax highlighting.


Download markdown.php

Comments

Interesting...

Very nice... so is the eventual plan to migrate to wordpress so we will have features like this on the main site?

Yes, that's the plan.

Yes, that's the plan. WordPress just feels easier to manage. And it seems to have a more helpful community. We just move slow around here. Hopefully in the future we will be properly notified of comments, so actual questions like yours don't go unanswered for 2+ months (sorry!)

We're just a little hung up on how best to serve up images...