IdeaMonk

thoughts, ideas, code and other things...

Friday, June 27, 2008

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: ,

5 Comments:

At June 28, 2008 at 6:40 AM , Blogger Robby O'Connor said...

You're a life saver!

 
At August 12, 2008 at 8:21 PM , Blogger Fun Times @ Work Team said...

Syntax Highlighting is working fine. But I've a problem with the view plain, print and copy to clipboard links. When I click on them nothing is happening. When I move the mouse point over the links, browser status bar shows this "http://isuman.blogspot.com/#". But in your blog when I move the mouse point over the links this is what is displayed "http://ideamonk.blogspot.com/2008/06/adding-syntaxhighlighter-to-your.html#". Can you help me in solving this? My blog is http://isuman.blogspot.com

 
At October 12, 2008 at 4:14 PM , Blogger scottwb said...

Thanks for the tips on this. I didn't really dig in too deep, but I found that I didn't need all the extra js code to remove the brs, and instead used the dp.SyntaxHighlighter.BloggerMode() call.

I did notice that this stuff screwed with my drag-n-drop layout editor a little though. Did you have the same issue? (You can see my summary on this at: http://sleeplesscoding.blogspot.com/2008/10/blogger-syntax-highlighting.html)

 
At October 12, 2008 at 5:26 PM , Blogger Abhishek Mishra said...

@suman: thanks, you can modify the javascript to change it from ideamonk.blogspot.com to your website. Best would be to download all the js files that link to my googlepages, put them in yours and use.

@scottwb: Thanks for the summary... its very nicely done.

 
At December 12, 2009 at 12:26 AM , Anonymous Anonymous said...

Remarkable idea and it is duly

 

Post a Comment

Subscribe to Post Comments [Atom]

<< Home