jQuery Syntax Highlighter - Based on Google's Prettify

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

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

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

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 < and all the > to >. 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.

			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
		

			/**
			 * 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'
		

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