Syntax Highlighter For Source Code

In my previous blog, I demonstrated how syntax highlighter have made the source code so much more readable. I use alexgorbatchev code syntax highlighter powered with open source JavaScript. Here is the instructions.

Include the style sheets in your <header> tag.

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>

Include these JavaScript just right before the </body>. This render your page content first before the JavaScript, making the page appear faster.

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript">
</script>

Note: I am using javascript brush here. There are different brush for different programming language such as C#, VB, Java, perl, XML, Javascript, SQL and many more. Last, wrap your code syntax within

<pre class="brush: js">

</pre>

Again, notice that I am using alias 'js' for javascript brush. That's it. You get something nice like this (I am using the dark theme with shThemeRDark.css).

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"></script>

<pre class="brush: js">

</pre>

You may have already notice that the JavaScript and style sheets stated aboved are hosted on alexgorbatchev.com. If you want to modify the CSS and host them on your own sites, you can download them here. More configurations, brushes and styles information can be found on alexgorbatchev site. For those who are using blogger / wordpress or simply don't have a website to host the JavaScript and style sheet, check out my next post using Google Sites Google Code free hosting.