Highlight Code With GeSHi Filter

If you're writing some type of article or blog post that's displaying code, a syntax highlighter can be very useful. I searched through Drupal's modules and found a few, Syntax Highlighter, GeSHi Filter and JavaScript Syntax Highlighter. Both the "Syntax Highlighter" and "JavaScript Syntax Highlighter" are written in JavaScript, the code highlighting is handled by the browser.

GeSHi on the other hand is written in PHP and the code is highlighted when the content is saved in Drupal. In this article, I’ll demonstrate how to install and configure the GeSHi Filter module on a Drupal 7 site.

How to install GeSHi

Installing the GeSHi Filter module is relatively easy. All that’s required is the 7.x-2.x branch of the Libraries API and the GeSHi library itself. When downloading the GeSHi library make sure you download one of the 1.0.x version, the 1.1.x version is not supported by the module yet. You can download the library from this link.

Go ahead and download the GeSHi Filter and install it.

Next, download and install Libraries API. Make sure you download the 7.x-2.x version of Libraries API.

Finally, download the GeSHi library and copy into sites/all/libraries or where ever your “libraries” directory is located.

Configuring GeSHi

Once you have installed all the required modules and libraries go to admin/config/content/formats/geshifilter to configure GeSHi.

The first important item you'll need to configure is which languages you want enabled. Click on the "Languages" tab from the GeSHi configuration page.

To enable extra languages simply click on the "All" or "Disabled" to view other languages. Take note of the "Tag/Language attribute value" we'll use that value to wrap our code with when we need to highlight some code. For example, if you want to highlight some PHP code, then wrap it with <php></php>. Same goes for JavaScript, simply wrap it with <javascript></javascript>.

So far we haven't made any changes to the default configuration, next we’ll configure a filter to get GeSHi working. Go to admin/config/content/formats and add GeSHi filter to a specific text format. If you are using the "Limit allowed HTML tags" filter, make sure GeSHi is run after that particular filter.

Using GeSHi

Now that we have installed and configured GeSHi, it's time to take it for a test run. Go ahead and create a piece of content with some PHP code within the text.

If everything has been configured corrected, you should see some highlighted PHP code once you save the form.

If no highlighting occurred, double check the order of your filters.

Using The GeSHi Field

The GeSHi filter ships with another module called "GeSHi field". This module provides a field which allows users to paste code into a text area. This can be useful if you don’t want to allow users to paste code within the body field.

To use the GeSHi field, to go admin/structure/types and add the field to an article or page content type.

Once the new field has been created, create a piece of content and add some PHP code within the newly created field.

Save the form and view the highlighted code.