Antonio Ospite edited this page Feb 15, 2017 · 13 revisions

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

:moneybag: :moneybag: :moneybag: 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).

SyntaxHighlighter lets you build a single .js file that will include the core, CSS theme and the syntaxes that you wish to use. The process is very simple and consists of just a few steps.

Project Setup

$ git clone
$ cd syntaxhighlighter
$ npm install

There's a small number of build commands that is available:

$ ./node_modules/gulp/bin/gulp.js --help

  gulp [TASK] [OPTIONS...]

Available tasks
  build                                         Builds distribution files to be used via `<script/>` tags. $ gulp build --brushes value1,value2 --theme value
  help                                          Display this help text.
  setup-project                                 Sets up project for development. RUN THIS FIRST!
  setup-project:clone-repos                     Clones all repositories from SyntaxHighlighter GitHub organization
  setup-project:link-node_modules-into-repos    Links `./node_modules` into every cloned repository
  setup-project:link-repos-into-node_modules    Links every cloned repository into `./node_modules`
  setup-project:unlink-repos-from-node_modules  Unlinks every cloned repository from `./node_modules`

Use the ./node_modules/gulp/bin/gulp.js setup-project command to set up the project. This will clone ALL of the repositories from and place them into the repos subfolder. You are now ready to build your own distribution file.

Building syntaxhighlighter.js

By running ./node_modules/gulp/bin/gulp.js build you will make syntaxhighlighter.js, theme.css, and associated files. Note that the options --brushes and --theme do not have default values. If you will not specify them, you will get a script that doesn't do any syntax highlighting on its own, and you will not get the CSS file.

$ ./node_modules/gulp/bin/gulp.js build --help

  --brushes  Comma separated list of brush names or paths to be bundled.
  --theme    Name or path of the CSS theme you want to use.
  --compat   Will include v3 brush compatibility feature. See
    for complete details.
  --output   Output folder for dist files.
    [default: ".../syntaxhighlighter/dist"]
  --help     Show help                                                 [boolean]

Available brushes are "all" or applescript, as3, base, bash, coldfusion, cpp,
csharp, css, delphi, diff, erlang, groovy, haxe, java, javafx, javascript, perl,
php, plain, powershell, python, ruby, sass, scala, sql, swift, tap, typescript,
vb, xml.

You may also pass paths to brush JavaScript files and theme SASS files.


--brushes takes a comma separated list of brushes. Here's how brush resolution works:


1. IF X = `all`
  a. BUNDLE repos/brush-*/brush.js
  b. USE_SAMPLE repos/brush-*/sample.txt
  c. STOP

2. IF EXISTS repos/brush-X/brush.js
  a. BUNDLE repos/brush-X/brush.js
  b. USE_SAMPLE repos/brush-X/sample.txt
  c. STOP

  b. USE_SAMPLE DIR(X) + `/sample.txt`
  c. STOP




--theme takes a single theme name. Here's how theme resolution works:


1. IF EXISTS repos/theme-X/theme.scss
  a. BUNDLE repos/theme-X/theme.scss
  b. STOP

  b. STOP




By default all build files are places into the ./dist folder. You can change that by supplying this option.


Specifying this flag will make SyntaxHighlighter v4 work with all existing v3 brushes out of the box, without bundling. See Migration Guide for more details

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.