Drupal 7 syntax highlighting using Wysiwyg, CKEditor, and Syntax Highlighter

Drupal 7 Syntax Highlighting

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. Something similar to the Monokai theme as seen in the image.

Module and software downloads

To get started, 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

Go to 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.Drupal 7 Syntax Wysiwyg

  4. Click on Save to store the settings.

Step two

Go to 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. Drupal 7 Formats Filters

  3. Make sure Syntax highlighter is positioned above Convert line breaks into HTML in the Filter processing order. If not, the break tag might be displayed within the code on your page. Drupal 7 Formats Order

  4. In the Filter settings, add the <pre> tag to the Limit allowed HTML tags section. Drupal 7 Formats Tags

  5. Click Save configuration.

Step three

Go to 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.

Drupal 7 Toolbar

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.

Drupal 7 Button1

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.

Drupal 7 Button2

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!