jQuery Element

jQuery Element existence check


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:

	$('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:

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.


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


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.