Up until today, whenever I had wanted to put some source code within a blog post, I just put it inside a css-styled ‘<pre>’ tag. It worked alright, but lacked a few crucial source code features: line numbering and syntax highlighting.

I came across a post today, written by Matt of WordPress, saying that they had implemented source code highlighting on WordPress.com blogs. It looks awesome, but isn’t yet available in the downloadable version of WordPress; hopefully it is being included in the upcoming version 2.3.

Anyways, I wanted to do something similar for a blog post I am currently working on (there is too much code for my usual method), so I began my quest to find something that works equally well. When I had searched in the past, I couldn’t find anything that was easy to use within the WP Visual Editor, but this time I found SyntaxHighlighter (download).

If you take a look at the examples, they looks almost identical to the example posted on Matt’s blog. After further investigation, I found out that they are (apparently) based on the same Javascript library. Cool

Installation and Usage

This plugin is just as easy to install as any other WordPress plugin, and, once you enable it, gives you a nice set of configuration options. The most notable option is the ability to tell it which types of source code to support. This allows you to only enable the programming languages that you write about (CSS, HTML, PHP, and Javascript for me).

Using the plugin is equally easy; you don’t even need to mess with the WP Code Editor. Just type everything, including the indicator tags [ source:language][/source], directly into your Visual Editor. Here is what it looks like:

<?php
print ‘This makes source code in blog posts so much easier!’
?>

Note: One thing to keep in mind while using this plugin is that it puts your source code into a ‘<textarea>’. Therefore, if you make changes and then refresh the page, the source code will not change. You need to do a ‘Refresh+F5′ or reload the page from the address bar.

Still Room for Improvement

While I do love this plugin, there are a few things I wish it did better.

The first, and most important to me, is nesting. The only way I found to properly add indentations to my source code was with the use of ‘& nbsp;’ four times (to equal one tab). This is OK for small bits of code, but becomes impossible to manage when there is a lot of nesting. To make matters worse, the WP Visual Editor seems to strip them out if you re-edit the post.

The second problem I have with this plugin is that the syntax highlighting is not perfect. For one, it doesn’t recognize comments (keywords are highlighted within comments). Overall, the syntax highlight just doesn’t compare to what most people are used to from their desktop applications.

Final Thoughts

For me, the main benefit of this plugin is that it does not use the ‘<pre>’ tag to designate source code. For some reason, the WP Editor really messes with my ‘<pre>’ text… causing great frustration.

If you have been looking for a convenient way to display source code on your blog, you should definitely give this plugin a try.