How To Install jQuery.Syntax

Watch the introduction video to get started with jQuery.Syntax quickly! It covers all the steps outlined below.

Step 1: Download jQuery.Syntax

Download the latest version of jQuery.Syntax and extract the contents into a temporary directory e.g. {tmp}/jquery-syntax.

Step 2: Copy the public files from jQuery.Syntax to your website

Copy all the files in {tmp}/jquery-syntax/public/ to an appropriate sub-directory of your website, e.g. {webroot}/_static/jquery-syntax.

Copy the file {tmp}/jquery-syntax/examples/jquery-1.6.min.js to an appropriate sub-directory of your website, e.g. {webroot}/_static/. Alternatively, install any supported version of jQuery (1.4.1+).

For Experts

For information about customising the install process, see the advanced setup documentation.

Step 3: Insert JavaScript Scripts

In the page where you want to use syntax highlighting, add the following code to your <head>:

<script src="/_static/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/_static/jquery-syntax/jquery.syntax.min.js" type="text/javascript"></script>

<script type="text/javascript">
	// This function is executed when the page has finished loading.
	jQuery(function($) {
		// This function highlights (by default) pre and code tags which are annotated correctly.
		$.syntax();
	});
</script>

Here are the options for this function:

blockSelector: The selector used for picking out blocks of code. Defaults to "pre.syntax".
inlineSelector: The selector used for picking out inline code. Defaults to "code.syntax".
blockLayout: The layout used for replacing blocks of code. Defaults to "table". There are several other layouts available.
inlineLayout: The layout used for replacing inline code. Defaults to "inline". By default, this is the only layout suitable for inline code.
context: Limit the scope of the search for elements to highlight to within this element. Provide an element such as $('#comment_preview'). Defaults to undefined.

To use an option, supply a dictionary of key-value pairs:

$.syntax({
	blockSelector: "pre.syntax",
	inlineSelector: "code.syntax",
	blockLayout: "fixed",
	context: $('#preview')
});

For Experts

For information about other options and advanced usage, see the advanced setup documentation.

Step 4: Insert Source Code

Add the code to your page in between <pre> tags like the following:

<pre class="syntax javascript">function min (a, b) {
return a &lt; b ? a : b;
}</pre>

Note the class="syntax javascript". The "syntax" class tells jQuery.Syntax to highlight this <pre>, while "javascript" tells jQuery.Syntax what kind of code it is.

Escaping Code

Code embedded in HTML needs to be embedded in CDATA blocks or escaped appropriately.

Code embedded in CDATA

<pre class="syntax javascript"><![CDATA[
function hello () {
	return 10 < 20;
}]]></pre>

Code with HTML/XML entities

<pre class="syntax javascript">
function hello () {
	return 10 &lt; 20;
}</pre>

Available Brushes

The bold items are the main brush name (which you should use primarily), the italic items are aliases:

Complete Example

Here is the complete example source code (using shorthand notation for brush classes):

<!DOCTYPE html>
<html>
	<head>
		<script src="/_static/jquery-1.4.4.min.js" type="text/javascript"></script>
		<script src="/_static/jquery-syntax/jquery.syntax.min.js" type="text/javascript"></script>

		<script type="text/javascript">
		jQuery(function($) {
			$.syntax({root: '/_static/jquery-syntax/'});
		});
		</script>
	</head>
	<body>
		<h1>Example Inline PHP</h1>
		
		<p>Here is some inline PHP code: <code class="syntax php-script">$x = 50 + mysql_last_insert_id()</code>.</p>
		
		<h1>Example Block of Javascript</h1>
		
		<pre class="syntax javascript">function min (a, b) {
	return a &lt; b ? a : b;
}</pre>
	</body>
</html>