Google SourceHighlighter JavaScript Syntax Tool

Author: nathacof
Published: Saturday 4th of July 2009

You may have noticed the new look of the code on my site. I've been looking for a decent way to display this using purely CSS, but in light of some new found knowledge of JavaScript I opted to try out the Google SyntaxHighlighter tool

First we'll load the core JavaScript file, and then we'll load our syntax definitions.

<script type="text/javascript" src="/js/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/js/syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="/js/syntaxhighlighter/scripts/shBrushBash.js"></script>

<script type="text/javascript" src="/js/syntaxhighlighter/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="/js/syntaxhighlighter/scripts/shBrushSql.js"></script>

<script type="text/javascript" src="/js/syntaxhighlighter/scripts/shBrushXml.js"></script>

Next we need to activate the syntax highlighter on our pages:

<script type="text/javascript">
SyntaxHighlighter.all();
</script>

Here's how we use the code highlighter in our code:

<pre class="brush:php"><?php echo $test;?></pre>
<pre class="bush:xml"><span>This is some HTML</span></pre>
<pre class="brush:Jscript">function message()
{
alert("This alert box was called with the onload event");
}</pre>

Remember to use appropriate HTML entities, so that you don't break any HTML :P