About

jQuery Syntax Highlighter provides an elegant and simplistic interface for using Google's Prettify with jQuery. We also add a series of features that aren't possible just using Prettify, to ensure that you get the best experience possible:

So let's walk through it.

Installation via CDN (Content Delivery Network)

Step 1. Include jQuery (insert into your page's head tag)

If your page already has jQuery included then you can skip this step.

			<!-- Include jQuery (Syntax Highlighter Requirement) -->
			<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		

Step 2. Include jQuery Syntax Highlighter (insert into your page's head tag)

			<!-- Include jQuery Syntax Highlighter -->
			<script type="text/javascript" src="https://bevry-archive.github.io/jquery-syntaxhighlighter/scripts/jquery.syntaxhighlighter.min.js"></script>
		

Step 3. Initialise jQuery Syntax Highlighter (insert into your page's head tag)

			<!-- Initialise jQuery Syntax Highlighter -->
			<script type="text/javascript">$.SyntaxHighlighter.init();</script>
		

And that's all there is to it in regards to installation. You don't actually have to download anything! now that is neat. Alternatively you could use a local copy of jQuery Syntax Highlighter instead of the CDN copy, but we'll leave that to you. So moving on, how do we let Syntax Highlighter know that we want to highlight our code block?

Usage

So you have you standard code block of let's say javascript code, which looks like this:

			The following code block is what I would like to syntax highlight:
			<pre>
				// Define our Function
				function checkMeaningOfLife ( decimal, success ) {
					if ( parseInt(decimal,10) === 42 ) {
						window.console.log(success);
					}
				};
				// Define our Variables
				var	str = 'The meaning of life is true',
					decimal = 42.00;
				// Fire our Function
				checkMeaningOfLife(decimal,success);
			</pre>
		

And we want to highlight it. We can do this two ways. One is letting the Syntax Highlighter auto-detect which language you are using, the other is a more SEO friendly approach where we explicitly specify which language we want to use.

Auto-detection of the language

To highlight our code and auto-detect the language, we would simply add the classname highlight to our code block. This will look like so:

			The following code block is what I would like to syntax highlight:
			<pre class="highlight">
				// Define our Function
				function checkMeaningOfLife ( decimal, success ) {
					if ( parseInt(decimal,10) === 42 ) {
						window.console.log(success);
					}
				};
				// Define our Variables
				var	str = 'The meaning of life is true',
					decimal = 42.00;
				// Fire our Function
				checkMeaningOfLife(decimal,success);
			</pre>
		

Explicit specification of the language

We can also highlight our code by specifying the language used explicitly. This is good in case we don't trust the auto-detection script or if we would like some SEO benefits by being more semantic (explicit with our markup). To do this we would simply add the classname language-javascript to our code block, where the text javascript is the name of the language we are using. This will look like so:

			The following code block is what I would like to syntax highlight:
			<pre class="language-javascript">
				// Define our Function
				function checkMeaningOfLife ( decimal, success ) {
					if ( parseInt(decimal,10) === 42 ) {
						window.console.log(success);
					}
				};
				// Define our Variables
				var	str = 'The meaning of life is true',
					decimal = 42.00;
				// Fire our Function
				checkMeaningOfLife(decimal,success);
			</pre>
		

Sweet! That was too easy!. But there is one every important thing we have to take note of before we continue. And that is encoding our HTML within code blocks such that it is not actually interpreted by the browser as html! Eeee. So let's read about that.

Encoding HTML

An extremely important thing with using code blocks is making sure you are encoding your HTML properly within your code blocks. This is because if you don't your web browser will think it has to run that code, despite it being in a code or pre element! Argh! That could really cause problems... So what we want to do is whenever we want to include code blocks (regardless of whether or not we are wanting to syntax highlight them) we always must remember to encode the HTML entities appropriately! So we do this by converting all the characters which are < to &lt; and all the > to &gt;. So for instance let's look at the following code sample:

			<pre class="language-html">
				<span>
					I'm a span element. I hope I've been escaped properly... as otherwise I will be :-( and the browser will be :-O
				</span>
			</pre>
		

Looks good, but this is how we actually code it in our HTML:

			<pre class="language-html">
				&lt;span&gt;
					I'm a span element. I hope I've been escaped properly... as otherwise I will be :-( and the browser will be :-O
				&lt;/span&gt;
			</pre>
		

Hrmmm. Interesting... But once you've got that nailed, then there really are not worries and you're all good to go. If you are a keen person, you may want also want check out the source code for this demo to gain a better grasp of this issue.

There is also one quite important thing. Internet Explorer 6-8 will struggle displaying newlines using code elements. This is a known issue and has been documented in various locations with no known fix 1 2 3 . In the meantime please use pre elements instead of code elements. You can achieve the same SEO semantic benefits by adding the classname code to your pre element like so:

			<pre class="code language-html">
				&lt;span&gt;
					I'm a span element. I hope I've been escaped properly... as otherwise I will be :-( and the browser will be :-O
				&lt;/span&gt;
			</pre>
		

Great! So that is all there is too it and all you need to know to install and use the Syntax Highlighter. You can quit reading and start working on your project right now, or you could learn a little bit more.

Highlighting Dynamic/Ajax Content

Syntax Highlighter is also ajax friendly. This means we can load in dynamic code blocks into our page which we would like highlighted, and actually highlight them without problem. Let's see how we can do this with the following snippet of javascript code:

			var $content = $('<div>This is an upcoming code black:<code class="language-javascript">// I am some code</code></div>');
			$content.syntaxHighlight(); // will highlight the code block found inside
		

If you are using jQuery Sparkle (a Do-Not-Repeat-Yourself jQuery Framework aimed at simplifying your development with powerful tools) then calling $content.sparkle() will also call $content.syntaxHighlight() automatically for us.

Configurable Options

jQuery Syntax Highlighter comes with a whole bunch of configurable options. Here they are:

			/**
			 * Whether or not we should load in Google Prettify automatically if it was not detected.
			 */
			'load': true,

			/**
			 * Whether or not we should highlight all appropriate code blocks automatically once the page has finished loading.
			 */
			'highlight': true,

			/**
			 * Whether or not we should output debug information in case something is not working correctly.
			 */
			'debug': false,

			/**
			 * Whether or not we should wrap the code blocks lines, or have them scrollable.
			 */
			'wrapLines': true,

			/**
			 * Whether or not we should display line numbers next to the code blocks.
			 */
			'lineNumbers': true,

			/**
			 * Whether or not we should strip empty start and finish lines from the code blocks.
			 */
			'stripEmptyStartFinishLines': true,

			/**
			 * Whether or not we should remove whitespaces/indentations which are only there for HTML formatting of our code block.
			 */
			'stripInitialWhitespace': true,

			/**
			 * Whether or not we should alternate the lines background colours on odd and even rows.
			 */
			'alternateLines': false,

			/**
			 * The default class to look for in case we have not explicitly specified a language.
			 */
			'defaultCssClass': 'highlight',

			/**
			 * The theme that should be used by our highlighted code blocks.
			 */
			'theme': 'balupton',

			/**
			 * The themes to load in for use with our highlighted code blocks.
			 */
			'themes': ['balupton'],

			/**
			 * The baseUrl to load Google's Prettify from.
			 * This is used to load in Google's Prettify if the load option is true and it was not found.
			 */
			'prettifyBaseUrl': 'https://bevry-archive.github.io/jquery-syntaxhighlighter/prettify',

			/**
			 * The baseUrl to load our Syntax Highlighter from.
			 * This is used to load in the stylesheet and additional themes.
			 */
			'baseUrl': 'https://bevry-archive.github.io/balupton/jquery-syntaxhighlighter'
		

To use one, all we need to do is add it to our init call way back in our head tag when we initialise the jQuery Syntax Highlighter. So let's see how we would do this to disable line wrapping:

			<!-- Initialise jQuery Syntax Highlighter -->
			<script type="text/javascript">
				$.SyntaxHighlighter.init({
					'wrapLines':false
				});
			</script>
		

Enjoy!!!

This work is powered by coffee and distributed for free. Donations are how we afford our coffee. Coffee is how we stay awake after our day job hours to work on things like this free open-source project which you're looking at. So go ahead, and get that warm fuzzy feeling knowing you just helped some poor fellow working after hours for free to buy his coffee. You only need to spare a few dollars, or as much as you feel this piece of work is worth. Thanks so much. Alternatively; if you are not in a donating mood, then spreading the word about this project on twitter, your blog, or whatever is just as good. Thanks a bunch, we appreciate the help deeply.

This work is licensed under a MIT License.