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

The goal of this article is to show you how to configure Wysiwyg and CKEditor to embed syntactically highlighted (pretty) code into your Drupal page. Or, something that looks like this:

 /**
 * Remove the generator tag from the head for Drupal 7.
 * @param type $head_elements
 */
function jordanjr_html_head_alter(&$head_elements) {
  unset($head_elements['metatag_generator']);
}

You will need the following software and modules:

I am going to assume you have a working Drupal site with Wysiwyg and CKEditor configured and running. If not, check out the screencast at DrupalTherapy, Wysiwyg + CKEditor.

Next, download and install Syntax Highlighter, Syntax Highlighter Insert, and the Alex Gorbatchev Syntax Highlighter javascript library. The README.txt file in the Syntax Highlighter module will explain where to put the javascript files. Finally, enable the modules.

# Using drush from a command prompt
drush en -y syntaxhighlighter syntaxhighlighter_insert syntaxhighlighter_insert_wysiwyg

Module Settings and Configuration

Before you get started, there are a few configuration options you need to set.

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.

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

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

Not working for you? See something incorrect or a typo? Just let me know!

Comments

Add new comment

Enter your email address. This will not be displayed when your comment is posted.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Type the characters you see in this picture. (verify using audio)
Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.