Code is much easier to read when its different syntactical elements are colored differently. Modern IDEs do this automatically, but when pasting a code fragment into a webpage it is normally just displayed in a monospace font. We recently installed the GeSHiFilter module, which colors code syntax in our pages automatically. Here's how we did it.

First, though, some brief background on how Drupal uses Filters. All content that authors enter into Drupal is stored as-is in the database. Before being displayed, however, that raw content is flowed through zero or more Filters. Each filter modifies the content in a particular way — for example, one filter might remove profanity; another might strip out potentially harmful script elements. Each ordered collection of input filters is called an Input Format. The end result of running raw node content through an input format is an HTML fragment to be displayed inside a Drupal page.

It's important that Drupal stores the text in its raw format: you might want to add, remove, or enhance filters later, after all. If Drupal ran what the user typed through the filters before saving it to the database, you'd be stuck with the filtered data forever, and would have quite a maintenance issue on your hands. Saving the raw content in the database is definitely the right architectural choice.

At any rate, GeSHiFilter is a well-written module that uses the existing Generic Syntax Highlighter, a package written in PHP, for syntax highlighting. Once installed, you can add it to your existing filters.

Here are the steps we took to install it on this website:

1. Download the latest version of the GeSHiFilter module, from drupal.org, and unpack it into the sites/all/modules directory.
2. Download the GeSHi code itself from qbnz.com and install it into the standard location for the module, sites/all/modules/geshifilter/geshi. (We used the stable, slightly older 1.0.82 version instead of the 1.1 alpha because we are staid and safe kind of guys.)
3. Enable it as a module like any other, from the admin/build/modules page.
4. Review its configuration at admin/settings/geshifilter, and make appropriate changes.
5. Add it to the appropriate input formats by visiting admin/settings/filters and enabling it.

Now that we've installed it, syntax-coloring our code samples is trivial. All we need to do is decorate our code with the code element as we type. When Drupal is later processing this raw text for display, it will pipe it through the GeSHi filter. The filter will decorate that text with the appropriate HTML elements so that when rendered it displays with the various syntactical elements colored, line numbers, and so on.

For example, if we type this:

<code lang="java">
class HelloWorld
{  
        public static void main(String args[])
        {
           System.out.println("Hello World!");
        }
}
</code>

It will be displayed in readers' browsers like this:

class HelloWorld
{  
        public static void main(String args[])
        {
           System.out.println("Hello World!");
        }
}

This is a great example of what we love about Drupal: an excellent open-source architecture enables a thriving independent module scene.