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.

One thought on “SyntaxHighlighter Evolved: how it works

Comments are closed.