Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
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.
$ 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`
./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.
./node_modules/gulp/bin/gulp.js build you will make
theme.css, and associated files. Note that the options
--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.
--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
--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
--theme=default --theme=./my-theme.scss --theme=/full/path/to/my-theme.scss
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