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
5 Comments:
You're a life saver!
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
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)
@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.
Remarkable idea and it is duly
Post a Comment
Subscribe to Post Comments [Atom]
<< Home