New: Syntax highlighting for the examples and provide a link for DataTables initialisation options to the reference page

examples/advanced_init/column_render.html

@@ -465,7 +465,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"aoColumnDefs": [ 
 			{
@@ -479,6 +479,10 @@
 		]
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/advanced_init/complex_header.html

@@ -468,13 +468,18 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"aoColumnDefs": [
 			{ "bVisible": false, "aTargets": [2] }
 		]
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+	
 			
 			
 			<h1>Other examples</h1>

examples/advanced_init/dom_multiple_elements.html

@@ -467,11 +467,15 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"sDom": '&lt;"top"iflp&lt;"clear"&gt;&gt;rt&lt;"bottom"iflp&lt;"clear"&gt;&gt;'
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/advanced_init/dom_toolbar.html

@@ -471,12 +471,16 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"sDom": '&lt;"toolbar"&gt;frtip'
 	} );
 	$("div.toolbar").html('<b>Custom tool bar! Text/images etc.</b>');
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/advanced_init/events_live.html

@@ -482,7 +482,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	/* Init DataTables */
 	$('#example').dataTable();
 	
@@ -505,6 +505,10 @@
 		alert( sTitle )
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/advanced_init/events_post_init.html

@@ -493,7 +493,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	/*
 	 * First step is to create title attributes for the rows in the table
 	 * This isn't needed if the required 'title' attribute is already set in the HTML in the
@@ -527,6 +527,10 @@
 		"fade": 250
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/advanced_init/events_pre_init.html

@@ -493,7 +493,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	/*
 	 * First step is to create title attributes for the rows in the table
 	 * This isn't needed if the required 'title' attribute is already set in the HTML in the
@@ -527,6 +527,10 @@
 	/* Init DataTables */
 	$('#example').dataTable();
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/advanced_init/footer_callback.html

@@ -484,7 +484,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {
 			/*
@@ -511,6 +511,10 @@
 		}
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/advanced_init/highlight.html

@@ -459,10 +459,13 @@
 			
 			<h1>Initialisation code</h1>
 			<p>Javascript:</p>
-			<pre>
-$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable();
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 
 			<p>CSS (note that for this example the selector ".ex_highlight" is used to limit the CSS here to just this example.</p>
 			<pre>.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {

examples/advanced_init/html_sort.html

@@ -55,8 +55,13 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
-	$('#example').dataTable();</pre>
+			<pre class="brush: js;">$(document).ready(function() {
+	$('#example').dataTable();
+} );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/advanced_init/language_file.html

@@ -462,13 +462,17 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"oLanguage": {
 			"sUrl": "media/language/de_DE.txt"
 		}
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/advanced_init/length_menu.html

@@ -460,11 +460,15 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/advanced_init/row_callback.html

@@ -471,7 +471,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-				<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
 			/* Append the grade to the default row class name */
@@ -487,6 +487,10 @@
 		} ]
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/advanced_init/row_grouping.html

@@ -486,7 +486,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	oTable = $('#example').dataTable({
 		"fnDrawCallback": function ( oSettings ) {
 			if ( oSettings.aiDisplay.length == 0 )
@@ -522,6 +522,10 @@
 		"sDom": 'lfr&lt;"giveHeight"t&gt;ip'
 	});
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/advanced_init/sorting_control.html

@@ -475,7 +475,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"aoColumns": [
 			null,
@@ -486,6 +486,10 @@
 		]
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/ajax/ajax.html

@@ -59,12 +59,16 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"sAjaxSource": "sources/arrays.txt"
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/ajax/custom_data_property.html

@@ -60,13 +60,17 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"sAjaxSource": "sources/custom_prop.txt",
 		"sAjaxDataProp": "demo"
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/ajax/deep.html

@@ -66,7 +66,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	var oTable = $('#example').dataTable( {
 		"bProcessing": true,
 		"sAjaxSource": "sources/deep.txt",
@@ -79,6 +79,10 @@
 		]
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/ajax/defer_render.html

@@ -60,13 +60,17 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"sAjaxSource": "sources/arrays.txt",
 		"bDeferRender": true
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/ajax/null_data_source.html

@@ -57,7 +57,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	var oTable = $('#example').dataTable( {
 		"bProcessing": true,
 		"sAjaxSource": "sources/arrays.txt",
@@ -71,6 +71,10 @@
 		]
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/ajax/objects.html

@@ -66,7 +66,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	var oTable = $('#example').dataTable( {
 		"bProcessing": true,
 		"sAjaxSource": "sources/objects.txt",
@@ -79,6 +79,10 @@
 		]
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/ajax/objects_subarrays.html

@@ -66,7 +66,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	var oTable = $('#example').dataTable( {
 		"bProcessing": true,
 		"sAjaxSource": "sources/objects_subarrays.txt",
@@ -79,6 +79,10 @@
 		]
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/api/add_row.html

@@ -66,7 +66,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>/* Global var for counter */
+			<pre class="brush: js;">/* Global var for counter */
 var giCount = 1;
 
 $(document).ready(function() {
@@ -82,6 +82,10 @@ function fnClickAddRow() {
 	
 	giCount++;
 }</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/api/api_in_init.html

@@ -468,7 +468,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"fnInitComplete": function () {
 			var 
@@ -480,6 +480,10 @@
 		}
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/api/counter_column.html

@@ -533,7 +533,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"fnDrawCallback": function ( oSettings ) {
 			/* Need to redo the counters if filtered or sorted */
@@ -551,6 +551,10 @@
 		"aaSorting": [[ 1, 'asc' ]]
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/api/editable.html

@@ -479,7 +479,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	/* Init DataTables */
 	var oTable = $('#example').dataTable();
 	
@@ -498,6 +498,10 @@
 		"height": "14px"
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/api/form.html

@@ -530,7 +530,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>var oTable;
+			<pre class="brush: js;">var oTable;
 
 $(document).ready(function() {
 	$('#form').submit( function() {
@@ -541,6 +541,10 @@ $(document).ready(function() {
 	
 	oTable = $('#example').dataTable();
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/api/highlight.html

@@ -468,7 +468,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	var oTable = $('#example').dataTable( {
 		"bSortClasses": false
 	} );
@@ -481,6 +481,10 @@
 		$('td.highlighted', oTable.fnGetNodes()).removeClass('highlighted');
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/api/multi_filter.html

@@ -496,7 +496,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>var asInitVals = new Array();
+			<pre class="brush: js;">var asInitVals = new Array();
 
 $(document).ready(function() {
 	var oTable = $('#example').dataTable( {
@@ -536,6 +536,10 @@ $(document).ready(function() {
 		}
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			<p>Note that in the above code, the support functions are provided to ensure that the end user knows what data is being filtered upon. <b>fnFilter()</b> is the function of primary import here.</p>
 			
 			

examples/api/multi_filter_select.html

@@ -538,7 +538,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>(function($) {
+			<pre class="brush: js;">(function($) {
 /*
  * Function: fnGetColumnData
  * Purpose:  Return an array of table values from a particular column.
@@ -620,6 +620,10 @@ $(document).ready(function() {
 		} );
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/api/regex.html

@@ -554,7 +554,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>function fnFilterGlobal ()
+			<pre class="brush: js;">function fnFilterGlobal ()
 {
 	$('#example').dataTable().fnFilter( 
 		$("#global_filter").val(),
@@ -587,6 +587,10 @@ $(document).ready(function() {
 	
 	// ... etc for the other four columns
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/api/row_details.html

@@ -506,7 +506,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>/* Formating function for row details */
+			<pre class="brush: js;">/* Formating function for row details */
 function fnFormatDetails ( oTable, nTr )
 {
 	var aData = oTable.fnGetData( nTr );
@@ -566,6 +566,10 @@ $(document).ready(function() {
 		}
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/api/select_row.html

@@ -486,7 +486,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	/* Add a click handler to the rows - this could be used as a callback */
 	$('#example tr').click( function() {
 		if ( $(this).hasClass('row_selected') )
@@ -517,6 +517,10 @@ function fnGetSelected( oTableLocal )
 	}
 	return aReturn;
 }</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/api/select_single_row.html

@@ -494,7 +494,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>var oTable;
+			<pre class="brush: js;">var oTable;
 var giRedraw = false;
 
 $(document).ready(function() {
@@ -532,6 +532,10 @@ function fnGetSelected( oTableLocal )
 	}
 	return aReturn;
 }</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/api/show_hide.html

@@ -476,7 +476,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"sScrollY": "200px",
 		"bPaginate": false
@@ -491,6 +491,10 @@ function fnShowHide( iCol )
 	var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
 	oTable.fnSetColumnVis( iCol, bVis ? false : true );
 }</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/api/tabs_and_scrolling.html

@@ -297,7 +297,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$("#tabs").tabs( {
 		"show": function(event, ui) {
 			var oTable = $('div.dataTables_scrollBody&gt;table.display', ui.panel).dataTable();
@@ -317,6 +317,10 @@
 		]
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/basic_init/alt_pagination.html

@@ -423,11 +423,15 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"sPaginationType": "full_numbers"
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/basic_init/complex_header.html

@@ -464,9 +464,13 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable();
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/basic_init/dom.html

@@ -475,11 +475,15 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"sDom": '&lt;"top"i&gt;rt&lt;"bottom"flp&gt;&lt;"clear"&gt;'
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/basic_init/filter_only.html

@@ -460,15 +460,20 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bPaginate": false,
 		"bLengthChange": false,
 		"bFilter": true,
 		"bSort": false,
 		"bInfo": false,
-		"bAutoWidth": false } );
+		"bAutoWidth": false
+	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/basic_init/hidden_columns.html

@@ -458,13 +458,17 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 				$('#example').dataTable( {
 					"aoColumnDefs": [ 
 						{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
 						{ "bVisible": false, "aTargets": [ 3 ] }
 					] } );
 			} );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/basic_init/language.html

@@ -462,7 +462,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 $('#example').dataTable( {
 		"oLanguage": {
 			"sLengthMenu": "Display _MENU_ records per page",
@@ -473,6 +473,10 @@ $('#example').dataTable( {
 		}
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/basic_init/multi_col_sort.html

@@ -474,7 +474,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>/* Define two custom functions (asc and desc) for string sorting */
+			<pre class="brush: js;">/* Define two custom functions (asc and desc) for string sorting */
 jQuery.fn.dataTableExt.oSort['string-case-asc']  = function(x,y) {
 	return ((x &lt; y) ? -1 : ((x &gt; y) ?  1 : 0));
 };
@@ -496,6 +496,10 @@ $(document).ready(function() {
 		]
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/basic_init/multiple_tables.html

@@ -274,9 +274,13 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('.dataTable').dataTable();
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/basic_init/scroll_x.html

@@ -463,13 +463,18 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"sScrollX": "100%",
 		"sScrollXInner": "110%",
 		"bScrollCollapse": true
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+	
 			
 			
 			<h1>Other examples</h1>

examples/basic_init/scroll_xy.html

@@ -454,13 +454,17 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"sScrollY": 200,
 		"sScrollX": "100%",
 		"sScrollXInner": "110%"
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/basic_init/scroll_y.html

@@ -462,12 +462,16 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"sScrollY": "200px",
 		"bPaginate": false
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/basic_init/scroll_y_infinite.html

@@ -464,13 +464,17 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bScrollInfinite": true,
 		"bScrollCollapse": true,
 		"sScrollY": "200px"
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/basic_init/scroll_y_theme.html

@@ -463,13 +463,17 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"sScrollY": 200,
 		"bJQueryUI": true,
 		"sPaginationType": "full_numbers"
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/basic_init/state_save.html

@@ -460,11 +460,15 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bStateSave": true
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/basic_init/table_sorting.html

@@ -460,11 +460,15 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"aaSorting": [[ 4, "desc" ]]
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/basic_init/themes.html

@@ -453,12 +453,16 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	oTable = $('#example').dataTable({
 		"bJQueryUI": true,
 		"sPaginationType": "full_numbers"
 	});
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/basic_init/zero_config.html

@@ -458,9 +458,13 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable();
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/data_sources/ajax.html

@@ -59,12 +59,16 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"sAjaxSource": '../ajax/sources/arrays.txt'
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/data_sources/dom.html

@@ -458,9 +458,13 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable();
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/data_sources/js_array.html

@@ -113,7 +113,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#demo').html( '&lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="example"&gt;&lt;/table&gt;' );
 	$('#example').dataTable( {
 		"aaData": [
@@ -150,6 +150,10 @@
 		]
 	} );	
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/data_sources/server_side.html

@@ -63,13 +63,17 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"bServerSide": true,
 		"sAjaxSource": "../server_side/scripts/server_processing.php"
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Server side (PHP) code</h1>

examples/examples_support/syntax/css/shCore.css

@@ -0,0 +1,364 @@
+/**
+ * SyntaxHighlighter
+ * http://alexgorbatchev.com/SyntaxHighlighter
+ *
+ * SyntaxHighlighter is donationware. If you are using it, please donate.
+ * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
+ *
+ * @version
+ * 3.0.83 (July 02 2010)
+ * 
+ * @copyright
+ * Copyright (C) 2004-2010 Alex Gorbatchev.
+ *
+ * @license
+ * Dual licensed under the MIT and GPL licenses.
+ */
+.syntaxhighlighter a,
+.syntaxhighlighter div,
+.syntaxhighlighter code,
+.syntaxhighlighter table,
+.syntaxhighlighter table td,
+.syntaxhighlighter table tr,
+.syntaxhighlighter table tbody,
+.syntaxhighlighter table thead,
+.syntaxhighlighter table caption,
+.syntaxhighlighter textarea {
+  -moz-border-radius: 0 0 0 0 !important;
+  -webkit-border-radius: 0 0 0 0 !important;
+  background: none !important;
+  border: 0 !important;
+  bottom: auto !important;
+  float: none !important;
+  height: auto !important;
+  left: auto !important;
+  line-height: 1.1em !important;
+  margin: 0 !important;
+  outline: 0 !important;
+  overflow: visible !important;
+  padding: 0 !important;
+  position: static !important;
+  right: auto !important;
+  text-align: left !important;
+  top: auto !important;
+  vertical-align: baseline !important;
+  width: auto !important;
+  box-sizing: content-box !important;
+  font-family: "Consolas","Monaco","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
+  font-weight: normal !important;
+  font-style: normal !important;
+  font-size: 1em !important;
+  min-height: inherit !important;
+  min-height: auto !important;
+}
+
+.syntaxhighlighter {
+  width: 100% !important;
+  margin: 1em 0 1em 0 !important;
+  position: relative !important;
+  overflow: auto !important;
+  font-size: 1em !important;
+}
+.syntaxhighlighter.source {
+  overflow: hidden !important;
+}
+.syntaxhighlighter .bold {
+  font-weight: bold !important;
+}
+.syntaxhighlighter .italic {
+  font-style: italic !important;
+}
+.syntaxhighlighter .line {
+  white-space: pre !important;
+}
+.syntaxhighlighter table {
+  width: 100% !important;
+}
+.syntaxhighlighter table caption {
+  text-align: left !important;
+  padding: .5em 0 0.5em 1em !important;
+}
+.syntaxhighlighter table td.code {
+  width: 100% !important;
+}
+.syntaxhighlighter table td.code .container {
+  position: relative !important;
+}
+.syntaxhighlighter table td.code .container textarea {
+  box-sizing: border-box !important;
+  position: absolute !important;
+  left: 0 !important;
+  top: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  border: none !important;
+  background: white !important;
+  padding-left: 1em !important;
+  overflow: hidden !important;
+  white-space: pre !important;
+}
+.syntaxhighlighter table td.gutter .line {
+  text-align: right !important;
+  padding: 2px 0.5em 2px 1em !important;
+}
+.syntaxhighlighter table td.code .line {
+  padding: 2px 1em !important;
+}
+.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
+  padding-left: 0em !important;
+}
+.syntaxhighlighter.show {
+  display: block !important;
+}
+.syntaxhighlighter.collapsed table {
+  display: none !important;
+}
+.syntaxhighlighter.collapsed .toolbar {
+  padding: 0.1em 0.8em 0em 0.8em !important;
+  font-size: 1em !important;
+  position: static !important;
+  width: auto !important;
+  height: auto !important;
+}
+.syntaxhighlighter.collapsed .toolbar span {
+  display: inline !important;
+  margin-right: 1em !important;
+}
+.syntaxhighlighter.collapsed .toolbar span a {
+  padding: 0 !important;
+  display: none !important;
+}
+.syntaxhighlighter.collapsed .toolbar span a.expandSource {
+  display: inline !important;
+}
+.syntaxhighlighter .toolbar {
+  position: absolute !important;
+  right: 1px !important;
+  top: 1px !important;
+  width: 11px !important;
+  height: 11px !important;
+  font-size: 10px !important;
+  z-index: 10 !important;
+}
+.syntaxhighlighter .toolbar span.title {
+  display: inline !important;
+}
+.syntaxhighlighter .toolbar a {
+  display: block !important;
+  text-align: center !important;
+  text-decoration: none !important;
+  padding-top: 1px !important;
+}
+.syntaxhighlighter .toolbar a.expandSource {
+  display: none !important;
+}
+.syntaxhighlighter.ie {
+  font-size: .9em !important;
+  padding: 1px 0 1px 0 !important;
+}
+.syntaxhighlighter.ie .toolbar {
+  line-height: 8px !important;
+}
+.syntaxhighlighter.ie .toolbar a {
+  padding-top: 0px !important;
+}
+.syntaxhighlighter.printing .line.alt1 .content,
+.syntaxhighlighter.printing .line.alt2 .content,
+.syntaxhighlighter.printing .line.highlighted .number,
+.syntaxhighlighter.printing .line.highlighted.alt1 .content,
+.syntaxhighlighter.printing .line.highlighted.alt2 .content {
+  background: none !important;
+}
+.syntaxhighlighter.printing .line .number {
+  color: #bbbbbb !important;
+}
+.syntaxhighlighter.printing .line .content {
+  color: black !important;
+}
+.syntaxhighlighter.printing .toolbar {
+  display: none !important;
+}
+.syntaxhighlighter.printing a {
+  text-decoration: none !important;
+}
+.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
+  color: black !important;
+}
+.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
+  color: #008200 !important;
+}
+.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
+  color: blue !important;
+}
+.syntaxhighlighter.printing .keyword {
+  color: #006699 !important;
+  font-weight: bold !important;
+}
+.syntaxhighlighter.printing .preprocessor {
+  color: gray !important;
+}
+.syntaxhighlighter.printing .variable {
+  color: #aa7700 !important;
+}
+.syntaxhighlighter.printing .value {
+  color: #009900 !important;
+}
+.syntaxhighlighter.printing .functions {
+  color: #ff1493 !important;
+}
+.syntaxhighlighter.printing .constants {
+  color: #0066cc !important;
+}
+.syntaxhighlighter.printing .script {
+  font-weight: bold !important;
+}
+.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
+  color: gray !important;
+}
+.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
+  color: #ff1493 !important;
+}
+.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
+  color: red !important;
+}
+.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {
+  color: black !important;
+}
+
+
+
+/**
+ * SyntaxHighlighter
+ * http://alexgorbatchev.com/SyntaxHighlighter
+ *
+ * SyntaxHighlighter is donationware. If you are using it, please donate.
+ * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
+ *
+ * @version
+ * 3.0.83 (July 02 2010)
+ * 
+ * @copyright
+ * Copyright (C) 2004-2010 Alex Gorbatchev.
+ *
+ * @license
+ * Dual licensed under the MIT and GPL licenses.
+ */
+.syntaxhighlighter {
+  background-color: white !important;
+  font-size: 13px !important;
+  overflow: visible !important;
+}
+.syntaxhighlighter .line.alt1 {
+  background-color: white !important;
+}
+.syntaxhighlighter .line.alt2 {
+  background-color: #F8F8F8 !important;
+}
+.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
+  background-color: #e0e0e0 !important;
+}
+.syntaxhighlighter .line.highlighted.number {
+  color: black !important;
+}
+.syntaxhighlighter table caption {
+  color: black !important;
+}
+.syntaxhighlighter .gutter {
+}
+.syntaxhighlighter .gutter div {
+  color: #5C5C5C !important;
+  width: 20px !important;
+}
+.syntaxhighlighter .gutter .line.alt1, .syntaxhighlighter  .gutter .line.alt2 {
+  background-color: white !important;
+}
+.odd .syntaxhighlighter .gutter .line.alt1, .odd .syntaxhighlighter  .gutter .line.alt2 {
+  background-color: #F2F2F2 !important;
+}
+.syntaxhighlighter .gutter .line {
+  border-right: 3px solid #4E6CA3 !important;
+}
+.syntaxhighlighter .gutter .line.highlighted {
+  background-color: #4E6CA3 !important;
+  color: white !important;
+}
+.syntaxhighlighter.printing .line .content {
+  border: none !important;
+}
+.syntaxhighlighter.collapsed {
+  overflow: visible !important;
+}
+.syntaxhighlighter.collapsed .toolbar {
+  color: blue !important;
+  background: white !important;
+  border: 1px solid #4E6CA3 !important;
+}
+.syntaxhighlighter.collapsed .toolbar a {
+  color: blue !important;
+}
+.syntaxhighlighter.collapsed .toolbar a:hover {
+  color: red !important;
+}
+.syntaxhighlighter .toolbar {
+  color: white !important;
+  background: #4E6CA3 !important;
+  border: none !important;
+}
+.syntaxhighlighter .toolbar a {
+  color: white !important;
+}
+.syntaxhighlighter .toolbar a:hover {
+  color: black !important;
+}
+.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
+  color: black !important;
+}
+.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
+  color: #008200 !important;
+}
+.syntaxhighlighter .string, .syntaxhighlighter .string a {
+  color: blue !important;
+}
+.syntaxhighlighter .keyword {
+  color: #006699 !important;
+}
+.syntaxhighlighter .preprocessor {
+  color: gray !important;
+}
+.syntaxhighlighter .variable {
+  color: #aa7700 !important;
+}
+.syntaxhighlighter .value {
+  color: #009900 !important;
+}
+.syntaxhighlighter .functions {
+  color: #ff1493 !important;
+}
+.syntaxhighlighter .constants {
+  color: #0066cc !important;
+}
+.syntaxhighlighter .script {
+  font-weight: bold !important;
+  color: #006699 !important;
+  background-color: none !important;
+}
+.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
+  color: gray !important;
+}
+.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
+  color: #ff1493 !important;
+}
+.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
+  color: red !important;
+}
+
+.syntaxhighlighter .keyword {
+  font-weight: bold !important;
+}
+
+.datatables_ref:hover {
+	text-decoration: underline;
+	cursor: pointer;
+	*cursor: hand;
+}
+

examples/examples_support/syntax/license/Syntax Highlighter

@@ -0,0 +1,20 @@
+Copyright (c) 2003, 2004 Jim Weirich
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

examples/plug-ins/dom_sort.html

@@ -960,7 +960,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>/* Create an array with the values of all the input boxes in a column */
+			<pre class="brush: js;">/* Create an array with the values of all the input boxes in a column */
 $.fn.dataTableExt.afnSortData['dom-text'] = function  ( oSettings, iColumn )
 {
 	var aData = [];
@@ -1003,6 +1003,10 @@ $(document).ready(function() {
 		]
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/plug-ins/html_sort.html

@@ -60,7 +60,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>jQuery.fn.dataTableExt.aTypes.push(
+			<pre class="brush: js;">jQuery.fn.dataTableExt.aTypes.push(
 	function ( sData ) {
 		return 'html';
 	}
@@ -69,6 +69,10 @@
 $(document).ready(function() {
 	$('#example').dataTable();
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/plug-ins/paging_plugin.html

@@ -577,7 +577,7 @@ $.fn.dataTableExt.oPagination.scrolling = {
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>/* Time between each scrolling frame */
+			<pre class="brush: js;">/* Time between each scrolling frame */
 $.fn.dataTableExt.oPagination.iTweenTime = 100;
 
 $.fn.dataTableExt.oPagination.scrolling = {
@@ -699,6 +699,10 @@ $(document).ready(function() {
 		"sPaginationType": "scrolling"
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/plug-ins/plugin_api.html

@@ -493,7 +493,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>/*
+			<pre class="brush: js;">/*
  * Function: fnGetHiddenTrNodes
  * Purpose:  Get all of the hidden TR nodes (i.e. the ones which aren't on display)
  * Returns:  array:
@@ -529,6 +529,10 @@ $(document).ready(function() {
 		alert( nHidden.length +' nodes were returned' );
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/plug-ins/range_filtering.html

@@ -499,7 +499,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>/* Custom filtering function which will filter data in column four between two values */
+			<pre class="brush: js;">/* Custom filtering function which will filter data in column four between two values */
 $.fn.dataTableExt.afnFiltering.push(
 	function( oSettings, aData, iDataIndex ) {
 		var iMin = document.getElementById('min').value * 1;
@@ -533,6 +533,10 @@ $(document).ready(function() {
 	$('#min').keyup( function() { oTable.fnDraw(); } );
 	$('#max').keyup( function() { oTable.fnDraw(); } );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/plug-ins/sorting_plugin.html

@@ -509,7 +509,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>/* Note 'unshift' does not work in IE6. A simply array concatenation would. This is used
+			<pre class="brush: js;">/* Note 'unshift' does not work in IE6. A simply array concatenation would. This is used
  * to give the custom type top priority
  */
 jQuery.fn.dataTableExt.aTypes.unshift(
@@ -562,6 +562,10 @@ jQuery.fn.dataTableExt.oSort['numeric-comma-desc'] = function(a,b) {
 $(document).ready(function() {
 	$('#example').dataTable();
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/plug-ins/sorting_sType.html

@@ -483,7 +483,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>jQuery.fn.dataTableExt.oSort['numeric-comma-asc']  = function(a,b) {
+			<pre class="brush: js;">jQuery.fn.dataTableExt.oSort['numeric-comma-asc']  = function(a,b) {
 	var x = (a == "-") ? 0 : a.replace( /,/, "." );
 	var y = (b == "-") ? 0 : b.replace( /,/, "." );
 	x = parseFloat( x );
@@ -510,6 +510,10 @@ $(document).ready(function() {
 		]
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/server_side/column_ordering.html

@@ -70,7 +70,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"bServerSide": true,
@@ -84,6 +84,10 @@
 		]
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/server_side/custom_vars.html

@@ -65,7 +65,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"bServerSide": true,
@@ -75,6 +75,10 @@
     }
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/server_side/defer_loading.html

@@ -130,7 +130,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"bServerSide": true,
@@ -138,6 +138,10 @@
 		"iDeferLoading": 57
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/server_side/editable.html

@@ -72,7 +72,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	var oTable = $('#example').dataTable( {
 		"bProcessing": true,
 		"bServerSide": true,
@@ -88,6 +88,10 @@
 		}
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/server_side/ids.html

@@ -62,13 +62,17 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"bServerSide": true,
 		"sAjaxSource": "scripts/id.php"
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/server_side/jsonp.html

@@ -71,7 +71,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"bServerSide": true,
@@ -87,6 +87,10 @@
 		}
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/server_side/object_data.html

@@ -70,7 +70,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"bServerSide": true,
@@ -84,6 +84,10 @@
 		]
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/server_side/pipeline.html

@@ -167,7 +167,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>var oCache = {
+			<pre class="brush: js;">var oCache = {
 	iCacheLower: -1
 };
 
@@ -278,6 +278,10 @@ $(document).ready(function() {
 		"fnServerData": fnDataTablesPipeline
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/server_side/post.html

@@ -71,7 +71,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"bServerSide": true,
@@ -87,6 +87,10 @@
 		}
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/server_side/row_details.html

@@ -104,7 +104,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>var oTable;
+			<pre class="brush: js;">var oTable;
 
 /* Formating function for row details */
 function fnFormatDetails ( nTr )
@@ -151,6 +151,10 @@ $(document).ready(function() {
 		}
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/server_side/select_rows.html

@@ -85,7 +85,7 @@ $(document).ready(function() {
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	var aSelected = [];
 	
 	/* Init the table */
@@ -115,6 +115,10 @@ $(document).ready(function() {
 		$(this).toggleClass('row_selected');
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>

examples/server_side/server_side.html

@@ -63,13 +63,17 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"bServerSide": true,
 		"sAjaxSource": "scripts/server_processing.php"
 	} );
 } );</pre>
+		<style type="text/css">
+			@import "../examples_support/syntax/css/shCore.css";
+		</style>
+    <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Server side (PHP) code</h1>