Simple Flexible Code Syntax Highlighting Library – Syntaxy.js

Category: Javascript , Recommended , Text | June 12, 2016
Views Total:481 views
Official Page:Go to website
Last Update:June 12, 2016


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

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.


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)

You Might Be Interested In:

Leave a Reply