CSS SyntaxHighlighter 2.0: short tutorial on how to create your own syntax highlighter

Introduction

This is a tutorial showing you how to create your own syntax highlighter using CSS SyntaxHighlighter 2.0. Before reading this tutorial you need to know regular expression pretty well. Secondly, you need to know the nature of your syntax constructs and use the already made highlighter scripts as references.

• Is it a progamming language with keywords, functions, value? References: shBrushJava.js, shBrushCpp.js shBrushBash.js, etc.
• Is it some kind of configuration file with name and value pairs? References: shBrushCss.js, shBrushXml.js
• Is it some kind of output? References: shBrushDiff.js

The concept of SyntaxHighlighter

Let examine, shBrushBash.js, here is a trimmed version of the code

SyntaxHighlighter.brushes.Bash = function()
{
    var keywords =  'if fi then elif ....';
    var commands =  'alias apropos ....;
    this.regexList = [
        { regex: SyntaxHighlighter.regexLib.singleLinePerlComments,     css: 'comments' },      // one line comments
        { regex: SyntaxHighlighter.regexLib.doubleQuotedString,         css: 'string' },        // double quoted strings
        { regex: new RegExp(this.getKeywords(keywords), 'gm'),          css: 'keyword' },       // keywords
        { regex: new RegExp(this.getKeywords(commands), 'gm'),          css: 'functions' }      // commands
        ];
}
SyntaxHighlighter.brushes.Bash.prototype    = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.Bash.aliases      = ['bash', 'shell'];

SyntaxHighlighter uses the Template pattern for defining the common attributes. For instance, the Bash method adds another brush object in the SyntaxHighligher.brushes field. Inside this new brush object, it has the regexList which contains a list of syntax highlight rule objects which is composed of matching rule and the CSS property. The prototype field acts as a function object (functor) – Highlighter and it’s highlight function process the regexList field. So the SyntaxHighlighter.highlight function (which is called at the top level) finds the brush name called by the user and matches against all the brushes’ alias name. If there is a brush object matches the name, then calls the brush object’s Highlighter.highlight method.

The main concept of creating your own syntax highlighter is that you have to define your own pattern matching rules to what already defined in the CSS file. Note that you don’t have to cover all the definitions in the file, but the value of ‘css : ‘ defined in shBrushXXX.js must also exist in the CSS file. For example, in shThemeDefault.css, it is defined with the following names:

• comments, keyword, string, preprocessor, variable, value, functions, constants, script, color1, color2, color3

Secondly, mapping strings to a CSS property can be achieved by specifying regular expression for certain string patterns or pre-defined a group of specific strings and use getKeyWords method to bind it. For instance, this.regexList = [ { regex: new RegExp(this.getKeywords("Adam Bob Eve"), 'gm'), css : 'names' } ].

In theory, you can add more CSS rules if you need to as long as you have crafted the conditions (regular expression/getKeywords) to associate with it.

Create my own SyntaxHighlighter

In my case, I need to syntax highlight our license file which has name and value pairs. Following is some of the content:

!  WARNING - Do not edit this file.  Doing so will invalidate the key!
!
ID                   : 5076
Version              : 2.0
Issuer               : frp
Customer             : iTrinegy
Sub Customer         : INE-LCD
Issue Date           : 23-Mar-2009
Start Date           : 23-Mar-2009
Expiry Date          : 22-Sep-2009
Grace Period         : 7
Node                 : 00:30:18:A3:E1:AD

! Product
!
Product Title        : Itheon Network Emulator
Product              : INE-X-X
Components           : Emulator

! Component Group Definitions
!
Component Definition :  Start
Emulator             : Netmon:Detector,arp=YES,config=YES,ethernet=YES-
                      ,graphdata=YES,hub=YES,interfaces=2,iplib=YES,ipv4=YES-
                      ,ipv6=YES,ipv6icmp=YES,ipv6igmp=YES,MaxSameProcesses=2-
                      ,nbcli=YES,nblib=YES,netemu=YES,procdump=YES,pseudo=YES-
                      ,udp=YES,Version=4
Component Definition : End
Checksum             : 2f79-cbf2-d1d0-091d-9ee6-7569-a3af-0108

The main syntax highlight will be

• the separator for name and value pairs is the FIRST ‘:’ encounter (See the line Node and the Emulator)
• comment is started with ‘!’ til the end of the line

As for the CSS rules, all I need is to map: comments, keyword and string. So the SyntaxHighlighter for the license file would be:

SyntaxHighlighter.brushes.iTrinegy_Lic = function()
{
    this.regexList = [
        { regex: /^!.*$/gm,    css: 'comments' }      // one line comments
        ,{ regex: /^[\w \t]*(?=:)/gm,       css: 'keyword' }      // keywords
        ,{ regex: /:(?=[ \t]+)/gm,       css: 'color2' }      // separator
        ,{ regex: /(?:[ \t]*)\S|,.*$/gm,       css: 'string' }      // string
        ];
};
SyntaxHighlighter.brushes.iTrinegy_Lic.prototype    = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.iTrinegy_Lic.aliases      = ['itrinegy_lic'];

For the comment, it is easy – simply match any line started with ‘!’ character. For the keywords, match any strings with space(s) followed by a ‘:’ character but excluding the ‘:’ from the matched string. For the separators, match the ‘:’ character followed by any space(s). Finally for the string rule, there are two conditions in the regular expression. First part matches any strings after the ‘:’ character, second part match any lines started with a comma til the end of the line.

Then in the php, simply display the content of the license file:

<textarea id=view_license class='brush: itrinegy_lic;toolbar: true'>
<?php
if (file_exists("/home/viewedge/key/appliance.key")) {
  $lic_content = file_get_contents("/home/viewedge/key/appliance.key");
  echo $lic_content;
}
?>
</textarea>

Following is the screen shot of the new syntax highlighting for the License file which does make the content a lot easier to read comparing to the plain display.

I work for iTrinegy and here are my other Syntax Highlighter blogs