A little food for thought

Thursday, May 28, 2009

Getting syntax highlighting work in Blogger

As my previous post suggest I was trying different methods suggested by different blogs. But none of them working. Part of the problem was that blogger doesn not support CSS and JS files upload. So you need to depend on external sites to refer to these files. The other problem was instructions on these different blogs. Most of them said the to put first set of files before </head> But the problem is there are many </head> tags in Blogger template. Finally I could get it working. This is what I did

1> I added following lines after <$BlogMetaData$> tag.
<link type="text/css" rel="stylesheet" href="http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css"></link>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js"></script>
2> Add following lines before </body> tag. This should be just after <!-- End wraps --> tag.
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = "http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/clipboard.swf";
dp.SyntaxHighlighter.HighlightAll("code");
</script> 
This worked for me. Most probably will work for you as well. Enjoy.

No comments: