Adding SyntaxHighlighter to your blogger blog
Have you noticed colourful, beautified codes written in syntax highlighted format on so many blogs around the world? Here's how to get this into your own blog too -
1. If you want it to be done fast checkout FaziBear: Blogger Syntax Highlighter. You can add it as a widget on your blog. Clean and easy!
2. Now if you really want to use the real SyntaxHighlighter and wish to have greater control, the developertips article is worth reading.
3. Now as you have tried both of these, you will encounter strange extra
s and blank lines between each line. Don't worry I have a stupid hack for that. Use my negligibly modified code instead of the one mentioned at developertips.
<link href='http://[YOUR OWN PAGE].googlepages.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shCore.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushCpp.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushCSharp.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushCss.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushJava.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushJScript.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushSql.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushXml.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushRuby.js' type='text/javascript'/>
<script class='javascript'>
//<![CDATA[
function FindTagsByName(container, name, Tag)
{
var elements = document.getElementsByTagName(Tag);
for (var i = 0; i < elements.length; i++)
{
if (elements[i].getAttribute("name") == name)
{
container.push(elements[i]);
}
}
}
var elements = [];
FindTagsByName(elements, "code", "pre");
FindTagsByName(elements, "code", "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,''));
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("");
elements[i].replaceChild(newNode, brs[0]);
}
}
}
//clipboard does not work well, no line breaks
// dp.SyntaxHighlighter.ClipboardSwf =
//"http://[YOUR OWN PAGE].googlepages.com/clipboard.swf";
dp.SyntaxHighlighter.HighlightAll("code");
//]]>
</script>
Labels: javascript, tips n tricks