Using SyntaxHighlighter on BLOGGER

xHighlighter is a script which is written in javascript. It can insert colored code snippets on a web page using client-side javascript only. It is ideal tool for users of BLOGGER because we do not have server side resource to parse and highlight the code. And we are lazy, we do not want to write a lot of CSS to just post a code snippet.

Its a little twisting to make it properly.


Step 1: Download SyntaxtHighlighter From Here

Step 2: Extract the rar file. Upload Script and Style folder's file to any host or website which can be linked from your blog.

Step 3: Login to your Blogger account go to Setting> Template > Edit HTML make the following changes. Paste this code after <!-- end outer-wrapper -->

<link href='http://[YOUR HOST]/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/> <br /><script src='http://[YOUR HOST]/shCore.js' type='text/javascript'/> <br /> <br /><script src='http://[YOUR HOST]/shBrushCpp.js' type='text/javascript'/> <br /><script src='http://[YOUR HOST]/shBrushCSharp.js' type='text/javascript'/> <br /><script src='http://[YOUR HOST]/shBrushCss.js' type='text/javascript'/> <br /><script src='http://[YOUR HOST]/shBrushJava.js' type='text/javascript'/> <br /><script src='http://[YOUR HOST]/shBrushJScript.js' type='text/javascript'/> <br /><script src='http://[YOUR HOST]/shBrushSql.js' type='text/javascript'/> <br /><script src='http://[YOUR HOST]/shBrushXml.js' type='text/javascript'/> <br /> <br /><script class='javascript'> <br />//<![CDATA[ <br /> function FindTagsByName(container, name, Tag) <br /> { <br /> var elements = document.getElementsByTagName(Tag); <br /> for (var i = 0; i < elements.length; i++) <br /> { <br /> if (elements[i].getAttribute("name") == name) <br /> { <br /> container.push(elements[i]); <br /> } <br /> } <br /> } <br /> var elements = []; <br /> FindTagsByName(elements, "code", "pre"); <br /> FindTagsByName(elements, "code", "textarea"); <br /> <br />for(var i=0; i < elements.length; i++) { <br />if(elements[i].nodeName.toUpperCase() == "TEXTAREA") { <br /> var childNode = elements[i].childNodes[0]; <br /> var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,'\n')); <br /> elements[i].replaceChild(newNode, childNode); <br /> <br />} <br />else if(elements[i].nodeName.toUpperCase() == "PRE") { <br /> brs = elements[i].getElementsByTagName("br"); <br /> for(var j = 0, brLength = brs.length; j < brLength; j++) { <br /> var newNode = document.createTextNode("\n"); <br /> elements[i].replaceChild(newNode, brs[0]); <br /> } <br />} <br />} <br />//clipboard does not work well, no line breaks <br />// dp.SyntaxHighlighter.ClipboardSwf = <br />//"http://[YOUR HOST]/clipboard.swf"; <br />dp.SyntaxHighlighter.HighlightAll("code"); <br />//]]> <br /></script> <br /> <br /></body> <br /></html> <br /> <br />
Step 4: Now you can post code snippet on BLOGGER using either "pre" or "textarea" tag.
Step 5: You can also See tutorial HERE how to use "textarea" or "pre" tag.

Now everything has done !