Skip to main content

JQuery syntax Highlight plugin

By March 16, 2010June 1st, 2016Development

This plugin allows syntax highlighting of source code snippets in an html page. It is very important especially when we want to show our code example. There are a lot of free and useful syntax highlighting scripts around, but they are big, slow and have unnecessary functionality.
So that people can see examples of work in our portfolio, I wrote this little script to highlight HTML, CSS, PHP and JavaScript syntax. It’s very simple and works quickly.

How to use

Be sure that you have include the JQuery library. And just add this code inside your page head:

<script src="highlight.js" type="text/javascript"></script>

Call Highlighter on any selected pre tag:

$(document).ready(function(){
  $('pre.code').highlight({source:1, zebra:1, indent:'space', list:'ol'});
});

Default params:

var defaults = {
  // show source code tab
  source: true,
  // show zebra
  zebra: true,
  //indents: "tabs" or "space"  
  indent: 'tabs',
  //ordered ("ol") or unordered ("ul') list
  list: 'ol'
}

And use such “pre” tags in page content to highlight code:

<pre class="code">default</pre>
<pre class="code" lang="js">js code</pre>
<pre class="code" lang="css">css code</pre>
<pre class="code" lang="html">html code</pre>
<pre class="code" lang="php">php code</pre>

Soon I plan to write a module for Drupal and plugin for WordPress based on this script.

Demo

See demo page with css, html, php, js syntax highlighted.

Download

Version Downloads Date
1.06 zip (32.35 KB) 2016-June-01
1.05 zip (27.83 KB) 2015-December-02
1.04 zip (13.65 KB) 2015-February-12
1.03 zip (13.38 KB) 2015-February-11
1.02 zip (13.01 KB) 2014-July-10
1.1 zip (12.9 KB) 2013-May-23
1.0 zip (8.38 KB) 2010-March-16

Or you can download latest release on Github.

Changelog

Jquery Highlight 1.06, 2015-June-01
———————–
Added bash suppport, improved JS highlighting (Thanks again to owenBeresford).

Jquery Highlight 1.05, 2015-December-02
———————–
Many many many more PHP functions (Thanks again to owenBeresford).

Jquery Highlight 1.04, 2015-February-12
———————–
Added class, var, the PHP5 keywords, number formatting and others (Thanks to owenBeresford).

Jquery Highlight 1.03, 2015-February-11
———————–
Fixed incorrect comment parsing in PHP ( # )

Jquery Highlight 1.02, 2014-July-10
———————–
Added flex-* CSS keywords
//TODO Review a list of CSS properties and add missing to the plugin.

Jquery Highlight 1.1, 2013-May-23
———————–
– Added SQL highlighting (Thanks to ondrovic). Need to add nice color scheme.
– Introduced support of HTML5 syntax via valid “data-” attributes (Thanks to PieroWbmstr).

Tags:

Close Menu