I have been searching for Syntax Highlighter plug-in for Wordpress and Drupal, and decided to install the one available from Alex Gorbatchev. The module makes use of the Syntax Highlighter Javascript Library, and does the job I wanted. In order for Syntax Highlighter plug-in to work, you'll have to install both Javascript library and the module developed for Durpal or Wordpress. Once the module is installed, the syntax for using it is pretty much the same.

Syntax Highlighter Class Example

<pre class="brush: php; auto-links: true; class-name: custom;
            collapse: false; first-line: 10; gutter: true; hightlight: 10;
            html-script: true; smart-tabs: true; tab-size: 4; 
            toolbar: false;">

One of the problem that you may see with the default Syntax Highlighter is that you may see vertical scroll bar even though there is nothing to scroll vertically. This only happens to Google Chrome and Safari browsers, and it doesn't show on Firefox and Internet Explorer. To correct this problem, you may want to remove the lines that that defines overflow css property in shCore.css file.

overflow: visible !important;
overflow: auto  !important;

Bundled Brushes

Syntax Highlighter provides a number of pre-built brushes for various programming languages, scripts, markup languages and it even provides "shell" and "text" brushes for bash and plain old text messages. Unless you use WYSIWYG editor with an integrated Syntax Highlighter plug-in, you'll have to remember to use the correct brush and configuration options when you're using them. Here is the cheatsheet for how you can get best out of Syntax Highlighter.

Brush Name Brush Aliases Javascript Filename
ActionScript3 as3, actionscript3 shBrushAS3.js
ColdFusion cf, coldfusion shBrushColdFusion.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Erlang erl, erlang shBrushErlang.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
JavaFX jfx, javafx shBrushJavaFX.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
PowerShell ps, powershell shBrushPowerShell.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js

Configuration Options

The table below describe all available Syntax Highlighter configuration options and their default values. These options are local to each Syntax Highlighter element, and the author may change individually by changing the value of the parameters described below.

Name Default Value Description
auto-links true Allows you to turn detection of links in the highlighted element on and off. If the option is turned off, URLs won’t be clickable.
class-name '' Allows you to add a custom class (or multiple classes) to every highlighter element that will be created on the page.
collapse false Allows you to force highlighted elements on the page to be collapsed by default.
first-line 1 Allows you to change the first (starting) line number. This is only valid if you have the gutter turned on with line numbers.
gutter true Allows you to turn gutter with line numbers on and off.
highlight null Allows you to highlight one or more lines to focus user’s attention. When specifying as a parameter, you have to pass an array looking value, like [1, 2, 3] or just an number for a single line. If you are changing SyntaxHighlighter.defaults['highlight'], you can pass a number or an array of numbers.
html-script false Allows you to highlight a mixture of HTML/XML code and a script which is very common in web development. Setting this value to true requires that you have shBrushXml.js loaded and that the brush you are using supports this feature.
smart-tabs true Allows you to turn smart tabs feature on and off.
tab-size 4 Allows you to adjust tab size.
toolbar true Toggles toolbar on/off. The toolbar is a small square box shown on the syntax highlighted element, and gives credit to the author when clicked on the toolbar. You may set this to false by default by entering SyntaxHighlighter.defaults['toolbar'] = false; in the default expression.

For more information on Syntax Highlighter, please consult Alex Gorbatchev's website below:

Syntax Highlighter Bundled Brushes
Syntax Highlighter Configuration Options


Yes, it's Drupal installation.

By admin

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.