Jquery plugin for Source code syntax highlighting in HTML

Contents

1. Introduction
2. How to use
3. Demo
4. To do

Introduction

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.
I found 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:

<link type="text/css" rel="stylesheet" media="all" href="highlight.css"/>
<script type="text/javascript" src="highlight.js"></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:

default
js code
css code
html code
php code

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 1.0

To do

1. Need to make highlighting of different languages in the same block of code (html and css for example).
2. Highlighting of regular expressions found in the code not working.