Making a Brush

These instructions apply to v4 and up. If you are looking for instructions for older version, please see the original manual.

💰 💰 💰 Please click here to donate via PayPal and just like they say on TV – give generously! It motivates me to keep working on this (12 years now and counting).

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

Step 1

The best way to make a new brush is to start by cloning an existing one.

$ git clone https://github.com/syntaxhighlighter/brush-javascript
$ cd brush-javascript
$ npm install
$ npm test

Step 2

Modify the template to fit your needs.

import BrushBase from 'brush-base';
import {commonRegExp} from 'syntaxhighlighter-regex';

// you can have as many custom, space separated sets as you want
const functions = 'func1 func2';
const keywords = 'keyword1 keyword2';
const constants = 'CONST1 CONTS2';

export default class Brush extends BrushBase {
  // Array of names that this brush could be referenced 
  // by from the `<pre/>` or `<script/>` tags.
  static get aliases() {
    return ['brush-name'];
  }

  constructor() {
    super();

    // The order of `regexList` doesn't matter, the following classes
    // are defined with every brush: plain, comments, string, keyword, 
    // preprocessor, variable, value, functions, constants, script, 
    // script_background, color1, color2, color3
    this.regexList = [
      {regex: commonRegExp.singleLineCComments, css: 'comments'},
      {regex: commonRegExp.multiLineCComments, css: 'comments'},
      {regex: commonRegExp.doubleQuotedString, css: 'string'},
      {regex: commonRegExp.singleQuotedString, css: 'string'},
      {regex: /\$\w+/g, css: 'variable'},
      {regex: new RegExp(this.getKeywords(functions), 'gmi'), css: 'functions'},
      {regex: new RegExp(this.getKeywords(constants), 'gmi'), css: 'constants'},
      {regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword'}
    ];

    this.forHtmlScript(commonRegExp.phpScriptTags);
  }
}

Step 3

Update sample.txt with a decent code sample that includes all of the features that you are highlighting. This is very important!

Step 4

Update package.json fields, please keep the name field in the brush-... format.

Step 5

Run npm publish and let everyone know about it!