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

Tiny Cross-browser Syntax Highlighter For jQuery - Syntax.js
File Size: 5.66 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

2019-11-25

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.