Source code highlighting using FCKeditor and GeSHi for Drupal

For the setup of this site, I knew that I needed a good way to display source code in stories. I assumed that Drupal would already have a good way to deal with source code in a post, but I found out that this required quite a lot of manual configuration. In addition to just displaying source code nicely, I wanted to be able to use source code in FCKeditor.

During my research, I came across a module called GeSHi Filter, which was exactly what I was looking for to display source code. This module integrates the third party PHP library GeSHi (Generic Syntax Highlighter) into Drupal. Installing this module was straightforward, except for the fact that the readme didn’t mention that I needed to activate the filter in Drupal’s input filters.

GeSHi takes care of displaying source code within the tag. Unfortunatley, using this tag in FCKeditor is tricky.

In order to use the tag in FCKeditor, one needs to switch to the source view. In that view, you can enter the source code you’d like to display in the post, and GeSHi will format it nicely once the node is submitted.

There’s 2 caveats:

  1. In order for FCKeditor to not screw up the code after switching back to rich text editing mode, the following line needs to be added to fckeditor.config.js:
    FCKConfig.ProtectedSource.Add( //gi );
  2. According to the FCKeditor documentation, protected code is not being displayed at all in rich text mode. However, that code will be displayed when viewing the node.

Unfortunately, I wasn’t able to find a better way to integrate the two. This integration works for now, but I hope that the a future release of FCKeditor will offer a better method for source code highlighting.