Syntax Highlighter Usage (SYNTAXHIGHLIGHTER-OPTIONS)

Mar 04 2012 Development , Framework 0 Comments Last Modified on 2024-02-02
Syntax Highlighter Javascript Library

I have been searching for a 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 the Syntax Highlighter plug-in to work, you'll have to install both the Javascript library and the module developed for Drupal 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 problems that you may see with the default Syntax Highlighter is that you may see a 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 define 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, and markup languages and it even provides "shell" and "text" brushes for bash and plain old text messages. Unless you use the 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 the best out of Syntax Highlighter.

Brush NameBrush AliasesJavascript Filename
ActionScript3as3, actionscript3shBrushAS3.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js

Configuration Options

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

NameDefault ValueDescription
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 the user’s attention. When specifying as a parameter, you have to pass an array-looking value, like [1, 2, 3], or just a 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.

Share this post

Comments (0)

    No comment

Leave a comment

All comments are moderated. Spammy and bot submitted comments are deleted. Please submit the comments that are helpful to others, and we'll approve your comments. A comment that includes outbound link will only be approved if the content is relevant to the topic, and has some value to our readers.


Login To Post Comment