How to use Google's Syntax Highlighter in Blogspot

Being a techie, we sometimes wish to post source code. Now, we all know that reading it can be a pain in the neck, especially if it's not nicely formatted. As convenient as blogspot is, it doesn't provide any funtionality to format source code. Luckily there's a thing called syntax highlighter and it's quite easy to have it working with your blog. Simply follow those four steps

1. Download Syntax Highlighter from Google
2. Extract files and upload them to a webserver ([your URL])
3. Edit your template and replace

      </div></div> <!-- end outer-wrapper -->
</body>
</html>

by

     </div></div> <!-- end outer-wrapper -->
     <link href='[your URL]/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
     <script src='[your URL]]/shCore.js' type='text/javascript'/>
     <script src='[your URL]/shBrushCpp.js' type='text/javascript'/>
     <script src='[your URL]/shBrushCSharp.js' type='text/javascript'/>
     <script src='[your URL]/shBrushCss.js'type='text/javascript'/>     
     <script src='[your URL]/shBrushJava.js' type='text/javascript'/>
     <script src='[your URL]/shBrushJScript.js' type='text/javascript'/>
     <script src='[your URL]/shBrushSql.js' type='text/javascript'/>
     <script src='[your URL]/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 = 
        //"[your URL]/clipboard.swf";
        dp.SyntaxHighlighter.HighlightAll("code");
      //]]>
     </script>
   </body>
   </html>

4. Write your post and add source code (in the HTML tab) using either

      <pre name="code" class="java">
          // your code here
      </pre>

or

      <textarea name="code" class="java">
          // your code here
      </textarea>

As an example, the following code

<textarea name="code" class="java">
/**
* Hello World Example
*/
   class HelloWorld {
      public static void main(String[] args) {
         String message="Hello World!";
         System.out.println(message);
   }
}
</textarea>

becomes

  /**
  * Hello World Example
  */
  class HelloWorld {
    public static void main(String[] args) {
           String message="Hello World!";
           System.out.println(message);
    }
 }

Note:

• When posting XML or HTML, replace < by < and > by >
  
• change class="java" as needed to java, csharp, css, xml, html, ... (complete list)
• JavaScript removes <br/> tags because blogger automatically adds them in case of a linebreak but syntax highlighter would display them in plain text