The syntax highlighter

I believe some of my readers might be thinking to themselves how does Nicholas wraps around the codes that he demonstrates in his blog entries in a text area filled with interleaving colors. It also comes with the copying feature and viewing the codes in plain texts. Many thanks to Alex Gorbatchev for this wonderful Javascript library that allows us to read codes more easily in blogs or online journals. This is his website if you would want to take a look at his work. Or you can actually go to Google Code website to download the package. There are several steps for you to follow if you want to get your codes display nicely in the encapsulated and decorated text area.

[1] Go to the syntaxhighlighter website at Google Code to download the latest version of the Javascript library.


[2] Download the compressed file and unzip it in your remote hosting. I may suggest Google Apps to host the uncompressed files. You will have to use WinRAR to unzip the contents. I rename the folder called "dp.SyntaxHighlighter" to "SyntaxHighlighter". There are 2 folders that I make use in the uncompressed file namely "Styles" and "Scripts".

[3] Edit your blog template to insert these lines of codes, preferably at the footer part of the template that reads "<!-- end outer-wrapper --> ".
<br /><!-- end outer-wrapper --> <br /><br /><script type='text/javascript'> <br />window.isBloggerMode = true;<br /></script> <br /><br /><link href='http://[YOUR_HOST]/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/> <br /><script class='javascript' src='http://[YOUR_HOST]/Scripts/shCore.js'></script> <br /><script class='javascript' src='http://[YOUR_HOST]/Scripts/shBrushCSharp.js'></script> <br /><script class='javascript' src='http://[YOUR_HOST]/Scripts/shBrushPhp.js'></script> <br /><script class='javascript' src='http://[YOUR_HOST]/Scripts/shBrushJScript.js'></script> <br /><script class='javascript' src='http://[YOUR_HOST]/Scripts/shBrushJava.js'></script> <br /><script class='javascript' src='http://[YOUR_HOST]/Scripts/shBrushVb.js'></script> <br /><script class='javascript' src='http://[YOUR_HOST]/Scripts/shBrushSql.js'></script> <br /><script class='javascript' src='http://[YOUR_HOST]/Scripts/shBrushXml.js'></script> <br /><script class='javascript' src='http://[YOUR_HOST]/Scripts/shBrushDelphi.js'></script> <br /><script class='javascript' src='http://[YOUR_HOST]/Scripts/shBrushPython.js'></script> <br /><script class='javascript' src='http://[YOUR_HOST]/Scripts/shBrushRuby.js'></script> <br /><script class='javascript' src='http://[YOUR_HOST]/Scripts/shBrushCss.js'></script> <br /><script class='javascript' src='http://[YOUR_HOST]/Scripts/shBrushCpp.js'></script> <br /><script class='javascript' src='http://[YOUR_HOST]/Scripts/shBrushScala.js'></script> <br /><script class='javascript' src='http://[YOUR_HOST]/Scripts/shBrushGroovy.js'></script> <br /><script class='javascript' src='http://[YOUR_HOST]/Scripts/shBrushBash.js'></script> <br /><script class='javascript'> <br /> if(window.isBloggerMode == true)<br /> dp.SyntaxHighlighter.BloggerMode();<br /><br /> dp.SyntaxHighlighter.ClipboardSwf = 'http://[YOUR_HOST]/Scripts/clipboard.swf';<br /> dp.SyntaxHighlighter.HighlightAll('code');<br /></script> <br />
[4] The next step is to try inserting your code snippets into this textarea
<textarea name="code" class="javascript" cols="60" rows="10">
  code...
  code...
  code...
</textarea>

Hope you have fun trying this out! :)