SyntaxHighlighter 3.0.83

Fork Me On GitHub
whats new?
SyntaxHighlighter is an open source Java Script client side code syntax highlighter.
donate download installation autoloader configuration @syntaxhighlight

Developing a custom brush

Developing a custom brush allows you to easily extend SyntaxHighlighter to support the syntax that isn’t bundled by default. This process is rather simple and consists of 4 parts:

Begin

Usually you would start with a new JS file and declare a brush in the SyntaxHighlighter.brushes object.

      SyntaxHighlighter.brushes.Custom = function()
      {
      };
      
      SyntaxHighlighter.brushes.Custom.prototype = new SyntaxHighlighter.Highlighter();
      

Describe syntax

This is perhaps the most complicated part because you need to work out things like keywords and possibly create regular expressions for the lexicon you want to parse if you can’t find what you need in the regexLib collection. For example:

      SyntaxHighlighter.brushes.Custom = function()
      {
      	var funcs		= 'abs avg case cast';
      	var keywords	= 'absolute action add';
      	var operators	= 'all and any between cross';
      
      	this.regexList = [
      		{ regex: /--(.*)$/gm,												css: 'comments' },
      		{ regex: SyntaxHighlighter.regexLib.multiLineDoubleQuotedString,	css: 'string' },
      		{ regex: new RegExp(this.getKeywords(funcs), 'gmi'),				css: 'color2' },
      		{ regex: new RegExp(this.getKeywords(operators), 'gmi'),			css: 'color1' },
      		{ regex: new RegExp(this.getKeywords(keywords), 'gmi'),				css: 'keyword' }
      		];
      };
      SyntaxHighlighter.brushes.Custom.prototype = new SyntaxHighlighter.Highlighter();
      

Register aliases

Aliases are the short names that you can use to reference your custom brush.

      SyntaxHighlighter.brushes.Custom = function()
      {
      ...
      };
      SyntaxHighlighter.brushes.Custom.prototype	= new SyntaxHighlighter.Highlighter();
      SyntaxHighlighter.brushes.Custom.aliases	= ['custom', 'ctm', 'ct'];
      

Use it

All you need to do now is load your brush with <script/> reference and then use it:

      <pre class="brush: custom">
      ...
      </pre>