how to use syntax highlighter in blogspot

Last night I was searching syntax highlighter to make my sample code look nice and easy to read. I was googling using "blogspot syntax highlighter" keyword and found this website. This library was developed by Alex Gorbatchev and look nice for me. It's fully developed in Javascript which is compatible with all web scripting language.

I had an experience using Geshi before found SyntaxHighlighter library. Geshi is another excellent library for syntax highlighter. It's also have more supported language compared with SyntaxHighlighter. Why i didn't use Geshi?. actually there is no good reason.. just want to try SyntaxHighlighter and share with you all ;)

Alex also provide hosted library for user who are using hosted service like a blogger. His kindness make me easy to use his library.

hosted file located in http://alexgorbatchev.com/pub/sh/[VERSION].

by the way, here is the step how to use his library
Step 1.
copy below code and paste it in your template file before </head>

<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/shThemeRDark.css" rel="stylesheet" type="text/css">
<script language="javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"><br /><script language="'javascript'" src="'http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js'/">

shBrushPhp.js and shThemeRDark.css is optional depending on what language and theme that you want to use in syntax highlighter. For more detail you may take a look at bundled syntaxes and bundled theme.


Copy below code and paste it before </script>

<script type='text/javascript'>
//<![CDATA[
function FindTagsByName(container, className, tagName)
{
var elements = document.getElementsByTagName(tagName);
for (var i = 0; i < elements.length; i++)
{
   var tagClassName = elements[i].className;
   if (tagClassName != null && tagClassName.search(className) == 0)
   {
      container.push(elements[i]);
   }
}
}

var elements = [];
FindTagsByName(elements, "brush:", "pre");
FindTagsByName(elements, "brush:", "textarea");

for(var i=0; i < elements.length; i++)
{
if(elements[i].nodeName.toUpperCase() == "TEXTAREA") {
   var childNode = elements[i].childNodes[0];
   var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,'\n'));
   elements[i].replaceChild(newNode, childNode);
}
else if(elements[i].nodeName.toUpperCase() == "PRE") {
   brs = elements[i].getElementsByTagName("br");
   for(var j = 0, brLength = brs.length; j < brLength; j++)
   {
       var newNode = document.createTextNode("\n");
       elements[i].replaceChild(newNode, brs[0]);
   }
}
}
SyntaxHighlighter.all();
//]]>

wacha..... done

how to use it?.. type in your html editor

<pre class="brush: php">

//your php code here

</pre>

<pre class="brush: delphi">

//your delphi code here

</pre>