Tuesday, November 02, 2010

Syntax Highlighting + CKEditor in Drupal

This article is aimed for those users who use CKEditor to update their Drupal powered website. If you include lots of code snippets or program listings in your articles, then you might consider reading this post to improve the reader's experience.


I recommend the module Syntax Highlighter which can be downloaded from Drupal. This will enable you to format code similar to the screenshot, and has syntax highlighting capabilities supporting a multitude of different programming languages!

Once you install this module by putting it in Drupal's modules directory, you will need to install a plugin which enables you to use the Syntax Highlighting module with CKEditor. This plugin can be downloaded from here and to install you simply need to extract the source directory (located in the downloaded archive) inside modules/ckeditor/ckeditor/plugins. Next step is to configure the plugin. Open up the file modules/ckeditor/ckeditor.config.js and add the following lines of code:

config.extraPlugins += (config.extraPlugins ? 
',syntaxhighlight' : 'syntaxhighlight' );
 
config.toolbar_DrupalFull = [
  ['Source'],
  ...
  ['DrupalBreak', 'DrupalPageBreak','Code']
];

The first part of the code enables the module, while the second part adds the Syntax Highlighting button.
In theory this should work and you are ready to use this feature, but in practice most users either don't have the button or else no code formatting takes place. Therefore, make sure you read these
two important steps:

1. Make sure that you are using the DrupalFull toolbar (not the Basic or the Full). To enable go to admin/settings/ckeditor/edit/Advanced and change the settings as follows:
2. Make sure that you are using the FullHTML input format filter and not the FilteredHTML filter. To enable go to admin/settings/filters and change the settings as follows:
Post a Comment