Code Highlighting in WordPress 2.0

Since this is a development blog, one of the things I wanted to be able to do was to post code examples in various languages, and a code highlighting plugin would add a good deal of value to this. Unfortunately, since we’re running a relatively new version of WordPress, several highlighting plug-ins that run under earlier versions are not compatible with WP 2.0. Happily, I found that the GeSHI Syntax Colorer works fine in WP 2.0.

Based on the Nigel McNie’s GeSHI (Generic Syntax Highlighter), the GeSHI Syntax Colore WP plug-in turned out to be a snap to install. The plug-in was also pretty easy to extend. After about 5 minutes, I was able to add line numbering and place the code in a white block. This was done with the following two lines of php:

$geshi->set_header_type(GESHI_HEADER_PRE);


$geshi->enable_line_numbers(GESHI_NORMAL_LINE_NUMBERS); 

I also updated my theme CSS with this code:

pre {


    clear:both;


    overflow:auto;


    background-color:#ffffff;


    /*width:100% !important;*/


    width:450px; /*for IE, which doesn’t obey !important or width:100% on pre */


    padding-bottom:0 !important;


    padding-bottom:1.5em; /* for IE which doesn’t make room at the bottom of the pre for a horizontal scrollbar */


}


 


code {


    color: #003366;


    font-family: ‘Courier New’,Courier,monospace;


} 

There are apparently many additional options in the GeSHI class, which I’ll explore later. In the meantime, I’m just happy I can post code that looks like, well, source code.