How to use the Syntax Highlighter module in Drupal 7

When I upgraded zugec.com to Drupal 7 I had to find another syntax highlighter because the previous one that I used in Drupal 6 was GeSHi but this module hadn’t been upgraded to Drupal 7 at the time. I searched around and found Syntax Highlighter module which uses the SyntaxHighlighter library.

In this post I’ll demonstrate how to setup and use SyntaxHighlighter in a Drupal 7 site.

UPDATE: Setup GeSHi on Drupal 7

Installation

To get started download the module from the project page and extract it intosites/all/modules. The second step is to download the library files fromhttp://alexgorbatchev.com/SyntaxHighlighter/download/ and extract them intosites/all/libraries.

syn_1.jpg

Once the library is added the path should look something like thissites/all/libraries/syntaxhighlighter_3.0.83.

Configuration

The next step is to add the module to a text format. In this example let’s add it to the Filtered HTML. Go to Administration >> Configuration >> Content authoring >> Text formats to configure the Filtered HTML format.

syn_2.jpg

Click on Filtered HTML configure link and tick the Syntax highlightercheckbox under Enabled filters.

syn_3.jpg

Once ticked click on Save configuration.

The next thing we’ll have to do is adjust the Filter processing order. Drag Syntax highlighter before the “Convert line breaks into HTML” filter. Check out image below.

syn_4a.png

The last bit of configuration we’ll have to do is enable some languages. Go to Administration >> Configuration >> Content authoring >> Syntax highlighter and tick which languages you want enabled.

syn_5.jpg

Using SyntaxHighlighter

Now let’s test this filter out, go to Add content and click on article. Let’s say for example you want to add some php to an article. Paste in some php and wrap{syntaxhighlighter brush: php} {/syntaxhighlighter} around the code.

brush: php is where we specify which language we want to highlight.

syn_6a.png

Once your ready with the article click on Save and if everything has been setup correctly your code should be highlighted. If it’s not working review the Filter processing order in text formats.

syn_7a.png

If you have any problems please post a comment.

More info