Building a Programmers Blog: Syntax Highlighted Code

Source code will eventually make an appearance on any programmers blog. Presenting the code well, including niceties like syntax highlighting, is relatively easy with Drupal.

The module we're installing is GeSHi Filter. This filter provides a way to integrate the GeSHi syntax highlighting open source project. It's important to note that the GeSHi filter by itself doesn't do much - all of the heavy lifting is done by the library.

Start by downloading both projects - make sure you grab the latest 1.0 release of GeSHi as the module doesn’t yet work with the 1.1 development branch. You need to combine the two downloads when you upload them to your site. After uploading the module into the usual location under sites/all/modules, upload GeSHi itself into a subdirectory within the module. The end result should look like this:

In the lowermost geshi subdirectory you need to upload a file for each language you want to support. You can upload all of the language files that come with GeSHi if you want - but with over 120 languages represented, you might want to include only the languages you're likely to use.

After turning on the GeSHi module, go to Administer - Site configuration * GeSHi Filter to configure. The first thing you'll see on this page should be a confirmation that the GeSHi library has been detected. The remainder of the settings are pretty self explanatory.

Once you've configured GeSHi itself, you need to configure the input filter. Go to your default input format - Administer - Site configuration - Input Formats - Markdown if you've been following this series, and add GeSHi into the mix:

Note that the sequence of input filters is important - you may need to go to the Rearrange tab to control the sequence of filters. Here's the sequence from this site for reference.

The other thing you'll need to do is to return to the GeSHi configuration page and select the Languages tab. Turn on each language you want to use, and optionally give each a tag. When using GeSHi, you can use a generic code tag, or (as I do) one that is specific to the language you want.

Once everything is set up, you can use tags - either [square] or <angle> to surround the code, and it'll appear with full syntax highlighting.

Write this:

[geshifilter-csharp]
file = new File();
try
{
    DoSomething();
}
finally
{
    file.Close();
}
[/geshifilter-csharp]

and get this:

file = new File();
try
{
    DoSomething();
}
finally
{
    file.Close();
}