Aside

Syntax Highlighting on WordPress

I’ve always wanted a cool syntax highlighter for source code on my blog, so when performing the latest revamp of my blog I decided to go hunting for a solution that would fit my needs.

Part of the ethos of my latest blog revamp is that I don’t want to be editing configuration files, modifying templates or adding anything that can’t be configured using the standard WordPress admin tools. For the last few years I’ve been unable to easily upgrade my template to make use of new WordPress features simply because I had implemented a lot of functionality by hacking at the various files within the template. This meant that although there are a number of JavaScript-only based solutions, I would need something that is packaged as a WordPress plugin to save me having to modify my template files.

A quick scan of the WordPress plugin gallery revealed SyntaxHighlighter MT to be a reasonable sounding option. It’s based on Alex Gorbatchev’s excellent SyntaxHighlighter, one of the afformentioned JavaScript-based solutions for formatting source code, and was based on the use of <pre> tags meaning I wouldn’t have to worry about inserting HTML special entities all over my code whenever I needed to post something.

After installing and converting over several posts I started to notice two main issues that were effectively show stoppers:

  1. Anything that looked like an XML tag was being made lowercase
  2. Anything that looked like a start tag of an XML element that didn’t have a corresponding end tag was having one automatically inserted

This may not sound like a huge deal, but the second point was especially painful when using non-XML-based languages. Take generics in C#, for instance. If I wanted to write a line of code like this:

IList<Customer> listOfActiveCustomers = customerService.GetActiveCustomers();

SyntaxHighlighter MT would spit out the following:

IList<customer> listOfActiveCustomers = customerService.GetActiveCustomers();
</customer>

Not only did it mess up the casing on the Customer type, it thought that the generic type parameter to IList was the start of an XML tag and thus needed to be closed.

Now, I’m guessing this has something to do with how WordPress in general processes text inside a <pre> tag and is probably not the fault of the plugin author, but that still didn’t change the fact that I needed a solution.

The WordPress.com guide to posting source code noted that WordPress.com blogs have access to the “sourcecode” WordPress shortcode to accomplish the very same thing. Now I’m not using WordPress.com, I self-host my blog using the WordPress.org code, but they do mention at the bottom of the post also indicates that the same functionality is available through the SyntaxHighlighter Evolved plugin.

This plugin also uses Alex Gorbatchev’s SyntaxHighlighter, but it uses WordPress shortcodes just like the functionality available through WordPress.com. I’ve now installed the new plugin and started converting old posts over to the new format with no issues whatsoever.

About Garry

I'm a Solution Architect living in Perth, Western Australia. I work primarily with Microsoft technologies, but I have an open mind and like to branch out into other areas in my spare time. I'm also a Microsoft Virtual Technology Solutions Professional (VTSP) in the Integration space and like to stay active in the local development community.

,

2 Responses to Syntax Highlighting on WordPress

  1. Chad July 28, 2011 at 2:36 am #

    Glad to hear you like the plugin. The tag issue is an ongoing problem from the original JS code. I really need to update the docs, but if you escape the opening tag as <, the plugin won’t try to match the rest of the tags.

  2. Chad July 28, 2011 at 2:37 am #

    *sigh* Or even as &lt;

Leave a Reply