I installed a WordPress plugin called SyntaxHighlighter Evolved, which highlights source code with client-side JavaScript. Here are a few notes about how it works:
- Code can be inserted using a Shortcode. Thanks to how Shortcodes work, HTML entities don’t need to be escaped in the HTML view.
- It uses a lot of Shortcode tags, one for each language, like php, so there is minimal overhead to inserting code snippets. This is a good decision in my opinion, because it gets used so often on code blogs.
- The underlying library, SyntaxHighlighter, has a core that contains generic features for highlighting code, and contains brushes for highlighting different languages. These are mostly data.
- The JavaScript code for SyntaxHighlighter is included at the end of the page, and only the needed brushes are included. Apparently when shortcodes are used, a language or brush name is added to a variable, and at the end of the page, it adds the appropriate script tag(s).
Finally, here are a couple of examples. This one is the included php brush:
function factorial($x) {
if ($x > 1) {
return $x * factorial($x-1);
} else {
return $x;
}
}
And here is the CoffeeScript brush, which is provided by another plugin that depends upon the SyntaxHighlighter Evolved plugin:
passed = (score for score in scores when score > 60)
I really like this plugin. It’s a very complete solution. That said, I’d really like to be using ACE editor or CodeMirror to insert/edit snippets in blog posts.