Monday, 4 February 2013

Drupal 7 - Syntax Highlighting using Wysiwyg, CKEditor, and Syntax Highlighter

Configure Wysiwyg and CKEditor to embed syntactically highlighted (pretty) code into our Drupal page. Or, something that looks like this:

 * Remove the generator tag from the head for Drupal 7.
 * @param type $head_elements
function chaitanya_html_head_alter(&$head_elements) {

We  need the following software and modules:

  1. Enable WYSIWYG Editor & CKEditor
  2. Download and install Syntax Highlighter, Syntax Highlighter Insert, and the Alex Gorbatchev Syntax Highlighter javascript library. 
  3. The README.txt file in the Syntax Highlighter module will explain where to put the javascript files. Finally, 
  4. Enable the modules.

Module Settings and Configuration

Step One
Home > Administration > Configuration > Content authoring > Wysiwyg profiles (admin/config/content/wysiwyg)
  1. Find the INPUT FORMAT used with CKEditor. Click on Edit under OPERATIONS.
  2. Click on BUTTONS AND PLUGINS to expand the section.
  3. Select the Insert syntaxhighlighter tag checkbox.
  4. Click on Save to store the settings.

Step Two

Home > Administration > Configuration > Content authoring > Text formats (admin/config/content/formats)
  1. Find the Text Format used with CKEditor in the prior step. Click on configure under OPERATIONS. 
  2. Under Enabled filters, select the Syntax highlighter checkbox.
  3. Make sure Syntax highlighter is positioned above "Convert line breaks into HTML" in the Filter processing order. If not, the break tag <br> might be displayed within the code on your page.
  4. In the Filter settings, add the <pre> tag to the Limit allowed HTML tags section.
  5. Click Save configuration.

Step Three

Home > Administration > Configuration > Content authoring > Syntax highlighter (admin/config/content/syntaxhighlighter)
  1. Under Enabled Languages, select one or more languages. Only the selected languages will be enabled and the corresponding javascript brush files loaded.
  2. Under Theme, select your desired theme.
  3. Under Tag name, notice the Syntax highlighter defaults to the <pre> tag.
  4. Click Save configuration.

Using Syntax Highlighter

Create a new piece of content or edit an existing page. Next, go to the body section (textarea) of the page. Make sure you have the correct Text format selected. If you don't see the Text format you modified in the prior steps, check your assigned roles and Permissions. On the CKEditor toolbar, you should notice a new button.

Click on the Syntax highlighter button and an overlay will be displayed. Fill in an optional Title and select your Brush. A Brush is the type of code language you want to highlight. There are also a variety of other options for you to select. Once you are finished, click Insert sytaxhighlighter tag. You should see a placeholder within the textarea field.

I've typed some CSS code into the placeholder. I find it's much easy to copy and paste the code into the placeholder vs. entering it freeform.

The final result looks like the below. The title "Sample CSS Code" was entered in the overlay...after I clicked on the Syntax Highlighter button.

Sample CSS Code

body {
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;

If everything is configured correctly, we should see the same result above.

No comments:

Post a Comment

Thank you so much for providing your valuable feedback. I will will look into them and update my skills & technologies accordingly.