Whilst looking for a syntax highlighter for my website, many of which I found were incredibly bloated with features that I knew I would never use and without modifying all of the files massively, I knew I'd never cut the size of the highlighters down. Page loading times for my website would stay high, and that's not what I wanted.

After Googling around a bit, it seemed that most people were recommending GeSHi - The Generic Syntax Highlighter, but that wasn't quite what I was after. Putting GeSHi on a dynamic page containing a list of blog posts meant that CSS rules would repeat themselves, and the GeSHi PHP class certainly isn't lightweight. However, I stumbled across a JavaScript solution...

jQuery.Syntax - The Lightweight JavaScript Highlighter

Developed by Samuel Williams, jQuery.Syntax is an extremely fast and lightweight Syntax Highlighter written in JavaScript. It dynamically loads the source files it needs and plays nicely with CSS. I found it to be perfect for my website as I was using jQuery already.

Using jQuery.Syntax is easy: Simply include the core JavaScript file into your page header, and add a CSS class to either the pre or code tags in your HTML. This is the result:

<?php
	function foo($bar) {
		$bar = strtoupper($bar);
		echo 'Uppercase: ' . $bar;
	}
?>

Even though jQuery.Syntax supports about 20 different languages, telling it that I only have PHP code in my post means that it will only load it's PHP styling files.

Setting up jQuery.Syntax

To begin, browse over to the jQuery.Syntax GitHub page and download the latest release. Also, make sure you have jQuery version 1.4.1+.

On the page you wish to add syntax highlighting to, in the head of the document, add:

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.syntax.min.js"></script>
<script type="text/javascript">
	$(function() {
		$.syntax({root: "scripts/"});
	});
</script>

• jQuery is included for obvious reasons; The plugin doesn't work without it.
• jquery.syntax.min.js contains all of the core files which will load all of the necessary files when it needs to. It has been minified for speed purposes, combining the 2 files "jquery.syntax.js" and "jquery.syntax.cache.js" together

In the custom function, change the root to where the jQuery.Syntax files are located, relative to the root of your website. This is for the dynamic loading of necessary files.

Now, to highlight a piece of code, simply wrap it in the pre HTML tags and add the class syntax {language} where {language} is one of the supported languages of the highlighter:

<pre class="syntax php">
<?php
	function foo($bar) {
		$bar = strtoupper($bar);
		echo 'Uppercase: ' . $bar;
	}
?>
</pre>

And that's it! It's as easy as that. Load your page and your code should now be highlighted.

As well as a table layout, jQuery.Syntax also supports the ability for inline styling, like shown above. to achieve this, simply add the syntax classes to the code HTML tags within a post:

Look at line 2 which says: <code class="syntax php">$bar = strtoupper($bar);</code> ...

The outcome:

Look at line 2 which says: $bar = strtoupper($bar); ...

A few more Advanced Features

For ultimate optimization, only include jQuert.Syntax when you need it. Here's a little piece of code to help you do that:

if ($('.syntax').length) {
	$.getScript(site_root + "/sh/jquery.syntax.min.js", function () {
		$.syntax({root: site_root + "/sh/"});
	});
}

Now there's no need to even load the minified version of jQuery.Syntax in your header - This function does it all dynamically for you.

You can also choose the block layout for large bodies of text. By default, jQuery.Syntax defaults to the "list" style type as shown in all of my code blocks above. However, there are also a few other block styles, namely a Table layout and a Fixed Layout. Exmaples of what these two different layouts look like can be viewed on the jQuery.Syntax Layout Examples page.

To change these on your website, simply include the option blockLayout in the $.syntax setup function like so:

$.syntax({root: site_root + "/sh/", blockLayout: "fixed"});

This function even supports custom layouts, if you make your own. The inline layout can also be changed using the option inlineLayout.

More advanced features are also supported - for a full list, I highly suggest checking out the Main jQuery.Syntax site.