There are a handful of syntax highlighting tools for WordPress. WP-Syntax, as of this post, is the most downloaded highlighter available at about 100,000 downloads. They have a lot in common and all support pretty much any scripting language you can think of. While they all use GeSHi coloring engine, the major problem I have with WP-Syntax plugin is that it’s simply a rectangle with colored code inside it. I was looking for something more.

The WP-Codebox plugin actually has features. These include line numbering, collapsible window, a ‘view source’ popup, and the language name printed in the header (for clarity, I guess). I don’t need anything fancy, but I was able to turn this into an elegant and simple solution for my code snippets.

It doesn’t start out pretty. In fact, the default CSS is somewhat of a turn-off. Call me obsessed, but I also can’t stand it when elements are not aligned properly.

Here is an the default theme for this plugin.
WP-Codebox Default Theme

I modified the images and CSS to create a cleaner look that you can see in action right here. I am very happy with the results and will now be using WP-Codebox with my 2.9.2 installation.

Here is some PHP in my modified theme

<div id="hello">
    function bar(){
        /* comment block */
        echo urlencode('Hello Evan');
    }</div>

Here we have some Javascript.

JAVASCRIPTview code
<script type='text/javascript'>
    function bar(){
        this.object = {
            "Property":"value",
            "Evan":"Meagher"
        }
    }
</script>

A final note: The only thing that code make this better now is for the 1.2 version of GeSHi to become reality. They have a demo over at http://geshi.org/. Here is what their new PHP highlighter produced for me.

GeSHi 1.2 Colors
GeSHi 1.2 Demo