A while ago I blogged about the Syntax Highlighting Evolved plugin for WordPress, a great and invaluable plugin to publish well-formatted and readable code in your blog articles. It is based on the well known JavaScript syntax highlighter by Alex Gorbatchev.

The difference to conventional syntax highlighters is that the formatting runs on the visitor's browser, using modern JavaScript DOM tree modification methods to convert the plain and unformatted code block (usually a <pre> or <code> element) into a formatted and syntax colored display.

The conventional method performs all the processing in PHP on the server and typically uses GeSHi, the most popular and complete syntax colorizer for PHP. GeSHi takes a chunk of code and produces the HTML- and CSS formatted output which can then be embedded into your blog post, wiki article or whatever else you publish. While syntax coloring and -formatting is not really complex, it involves a lot of text matching and "search and replace" operations and can therefore put significant load on your web server, unless you are using one of the more sophisticated caching solutions that allow you to serve static pages to most anonymous visitors.

Offloading this process to the visitor's browser makes therefore sense and can help with the sever load.

Now, I've found an even more lightweight solution that doesn't even add new filters to WordPress. It's called Syntax Highlighter MT and I've declared it my new favorite. While Syntax Highlighting Evolved installs a new shortcode and therefore needs to add at least one filter to parse it, this new plugin does not. It simply loads the required JavaScript files and that's about it. The plugin is very simple and straightforward and there are no options at all, but because it's so simple, no options are required.

Being a server administrator, I'd my own fair share of performance problems to deal with and because of this, I always closely watch the performance impact of scripts or plugins. I also think that offloading tasks to the client's browser makes a lot of sense as long as it does not totally destroy the browsing experience for visitors who can not or do not want to use JavaScript.

Example

Here is how it looks, using a chunk of C++ code embedded in <pre class="brush:cpp;">...</pre> tags. All you need to to is

• a) format the code as preformatted (can be done in the WordPress editor by selecting preformatted as the paragraph style).
• b) set the CSS class for the <pre> tag using the HTML source code editor in WordPress. Possible values and parameters for the class attribute are documented here.

/**
 * return true if this job is persistent (saved to the database).
 * such a job will survive a restart
 */
bool CSendLaterJob::isPersistentJob()
{
    return(szId[0] == 'S' ? true : false);
}

Cons

The only real disadvantage of JavaScript-based syntax coloring is that users who visit with JavaScript blocked or disabled will not see colorized text. They will see a standard <pre> element without any special formatting.

Server sided syntax highlighting

If you are looking for a synax highlighter that works without JavaScript (a pure PHP solution), then the GeSHi-based WP-Syntax plugin is worth a look. It basically does the same but does not require JavaScript on the client's browser. All processing is done on the server.

References

• Syntax Highlighter MT home page
• Syntax Highlighter MT plugin page in the WordPress plugin directory.
• JavaScript Syntax Highlighter by Alex Gorbatchev