Tiny Cross-browser Syntax Highlighter For jQuery - Syntax.js

Syntax.js is a simple, lightweight, cross-browser jQuery Syntax Highlighter which allows syntax highlighting of source codes in your html page. The plugin has the ability to dynamically load the proper syntax files (brushes) depending on the current syntax.

Basic usage:

1. Load the jQuery Syntax.js script and other required JS files into your html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.syntax.js"></script>
<script src="jquery.syntax.cache.js"></script>

2. Initialize the plugin and we're ready to go.

jQuery.syntax({

  // or 'bright', 'paper'
  theme: 'base'
  
});

3. Add your source code snippets into pre code elements and specify the brush you want to use.

<pre>
  <code class="syntax brush-javascript">
    JS snippets go here
  </code>
</pre>

4. All supported brushes:

• Apache
• Applescript
• Assembly
• Bash
• Basic
• Clang
• C# 
• C++
• CSS
• Diff
• Go
• Haskell
• HTML
• IO
• JavaScript
• Java
• JavaFX
• Kai
• Lisp
• Lua
• Nginx
• Ocaml
• OOC
• Pascal
• Perl
• PHP
• Plain
• Protobuf
• Python
• Ruby
• Scala
• Smalltalk
• SQL
• Super-collider
• Swift
• Trenni
• XML
• Yaml

5. Change the default theme:

jQuery.syntax({

  // or 'bright', 'paper'
  theme: 'base'
  
});

Changelog:

v4.3.0 (2020-05-19)

• Clone existing element if it was extracted during initial pass.

v4.2.1 (2020-05-06)

• Improvements to bash-script.

2019-11-25

• Update themes

2018-06-02

• Use flexbox for line indentation.

---

This awesome jQuery plugin is developed by ioquatix. For more Advanced Usages, please check the demo page or visit the official website.