Simple Flexible Code Syntax Highlighting Library – Syntaxy.js

Syntaxy.js is a small, fast, flexible, themeable syntax highlighter for any syntax languages.

How to use it:

Include a theme CSS of your choice on the webpage. Syntaxy.js currently comes with 3 built-in theme you can choose from:

• syntaxy.dark.min.css
• syntaxy.light.min.css
• syntaxy.purple.min.css

<link rel="stylesheet" href="/path/to/syntaxy.dark.min.css">

Wrap your source code in a pre tag and specify the language type using data-type attribute as follows:

<pre id="syntaxy" data-type="javascript">
  code to highlight here...
</pre>

Initialize the Syntaxy.js and add custom filters, modify options, etc to the Syntaxy() object.

var target  = document.getElementById( 'syntaxy' );
var syntaxy = new Syntaxy( target, {} );

Render the Syntax Highlighter on your web page.

syntaxy.render();

Default options.

tagOpen     : '«', // special tag open delimeter
tagSplit    : '≈', // special tag split delimeter
tagClose    : '»', // special tag close delimeter
tagName     : 'span', // final markup tag name
classPrefix : 'stx-', // syntaxy css class prefix
codeTitle   : 'Source code', // title to show on code box header
codeType    : '', // default syntax type to be used
minHeight   : '100px', // min height of syntax scroll container
maxHeight   : '600px', // max height of syntax scroll container
isInline    : false, // if rendering inline code containers
wordWrap    : false, // wrap long lines
startLine   : 1, // line to statrt counting from
debugLines  : '', // comma separated line numbers to debug (flash)