yellowup.com

One tool us programmers cannot do without is an editor with proper syntax highlighting features. As I will be regularly pasting code snippets on this website, I needed a plugin to do the same thing online to aid in readability. I’d like it to support multiple programming languages, show line numbers and allow me to overrule the default highlighting colors.

The Wordpress Plugin Directory contains a number of code highlighting plugins. I’ve limited myself to the most recent ones, which are certain to work with WordPress 2.5:

• Highlight Source Pro by Christian Knoflach
• WP-Syntax by Ryan McGeary
• WP Chili by Andrea Ercolino

I have tried all three and will share my experiences with you.

Highlight Source Pro

This plugin is based on GeSHi (the Generic Syntax Highlighter). Code highlighting is done server-side, so JavaScript is not needed.

I’ve done a test run with this plugin, first with a XML snippet and later with a PHP snippet. I had hoped I could just slap a <pre> block in here and the plugin would pick up which programming language I was using, but unfortunately you will have to specify it yourself by setting the lang attribute. The class attribute can be abused to specify any number as your starting line number. There are no line numbers if you omit the attribute.

The result of my XML test was not satisfactory: it worked, but only the XML tag and the more common attributes like xmlns were highlighted. It should be able to do more with a well-structured XML document. The PHP test fared a lot better: although I didn’t care much for the default colors, my code was highlighted properly. The plugin is intelligent enough to add horizontal scroll bars when needed, which I much prefer over unspecificied line breaks.

WP-Syntax

Like Highlight Source Pro, WP-Syntax is also based on GeSHi. It should therefore work with the languages I use most of the time: CSS, HTML, JavaScript, PHP, SQL & XML.

I again did both tests and it probably comes as no surprise that the results were completely identical, as both plugins use the GeSHi engine. WP-Syntax also supports line numbering, although it uses its custom line attribute instead of HSP’s neater class solution. If you care about XHTML validation, that you should probably skip WP-Syntax or avoid line numbering. I prefer WP-Syntax’s default layout for code snippets over HSP’s.

An issue I ran into that affects both plugins is that WordPress will seriously mess up your code snippets if you dare to use the visual editor. We will have to find a solution for that.

WP Chili

WP Chili is based on Chili - the jQuery code highlighter. Unfortunately I can be very brief about this plugin: it does not work for me at all.

The same two tests once again: XML was not recognised. My PHP example fared slightly better but it did not yield a nice looking code snippet, it looked rather like a <p> tag with color formatting. It did not add horizontal scroll bars when needed. I couldn’t get it to work consistently: a few times it worked, most of the time it did not.

Conclusion

The choice is between Highlight Source Pro and WP-Syntax. There is little difference between the two. Neither does exactly what I want. It should be noted that WordPress plays havoc with code snippets if you use the visual editor. It is dissapointing that neither plugin offers a solution for this problem.

Out of the two I picked WP-Syntax. I will have to make some modifications anyway and WP-Syntax’s default layout is more to my liking. To be continued!