SyntaxHighlighter with Blogger

Since I post some code from time to time in this blog and I like the idea of syntax highlighting I looked into adding SyntaxHighlighter to my page. I'd found this post by someone else explaining how to do it, but by now this was a little outdated.

So now I thought that I might do this too, since I seem to have gotten it working. Here's what I did:

1. (Using blogger) log in and go to Layout -> Edit HTML
2. Insert this code right before the </body> tag:

   <link href='http://alexgorbatchev.com/pub/sh/[VERSION]/styles/shCore.css' rel='stylesheet' type='text/css'/>
   <link href='http://alexgorbatchev.com/pub/sh/[VERSION]/styles/shThemeDefault.css' id='shTheme' rel='stylesheet' type='text/css'/>
   
   <script src='http://alexgorbatchev.com/pub/sh/[VERSION]/scripts/shCore.js' type='text/javascript'/>
   
   <script src='http://alexgorbatchev.com/pub/sh/[VERSION]/scripts/shBrushCpp.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/[VERSION]/scripts/shBrushCSharp.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/[VERSION]/scripts/shBrushCss.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/[VERSION]/scripts/shBrushJava.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/[VERSION]/scripts/shBrushJScript.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/[VERSION]/scripts/shBrushSql.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/[VERSION]/scripts/shBrushXml.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,'\n'));
    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("\n");
     elements[i].replaceChild(newNode, brs[0]);
    }
   }
   }
   //clipboard does not work well, no line breaks
   // dp.SyntaxHighlighter.ClipboardSwf =
   //"http://alexgorbatchev.com/pub/sh/[VERSION]/scripts/clipboard.swf";
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.all();
   //]]>
   </script>

The SyntaxHightlighter.config.bloggerMode = true; is used to be able to use line breaks in your code snippets with blogger.

If you go here you can select your [VERSION] and if you then go to [VERSION]/styles/ you can see some shTheme*.css files where you can select the theme you would like to use.