Building

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

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 https://github.com/syntaxhighlighter/syntaxhighlighter.git
$ cd syntaxhighlighter
$ npm install

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

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

Usage
  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 https://github.com/syntaxhighlighter 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

Options:
  --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
             http://bit.ly/1KCaUq6 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

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

--brushes=X

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

3. IF EXISTS X
  a. BUNDLE X
  b. USE_SAMPLE DIR(X) + `/sample.txt`
  c. STOP

Examples:

--brushes=all
--brushes=css
--brushes=css,javascript
--brushes=./my-brush.js
--brushes=/full/path/to/my-brush.js
--brushes=/full/path/to/my-brush.js,css,javascript

--theme

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

--theme=X

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

1. IF EXISTS X
  a. BUNDLE X
  b. STOP

Examples:

--theme=default
--theme=./my-theme.scss
--theme=/full/path/to/my-theme.scss

--output

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

--compat

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