How to Insert Code Snippet on Blogger

I have always wanted to share on "How to Insert Code Snippet On Blogger". I thought it would be good if I can share this "How-To" with all of you guys out there.

If you were to do a Google search with the right keyword, you should be able to find some gems, however, there is a need to tweak and make sure they work on Blogger.

For Blogger, there are 3 popular methods - Google SyntaxHighlighter, Google Prettify, code snippet plugin for Windows Live Writer. I have tried all 3 but I chose SyntaxHighlighter in the end. The main reason for my choice is its ability to copy code snippet easily without ending up copying line numbers when line number feature is on. Prettify is good but it does not have line number feature. Plugin for Windows Live Writer is not preferred because line number is copied together with the code snippet. This is not user friendly at all. Furthermore, Windows Live Writer is required to be installed.

[ Google SyntaxHighlighter ]

Homepage: http://code.google.com/p/syntaxhighlighter/
Usage: http://code.google.com/p/syntaxhighlighter/wiki/Usage

You will need to first download SyntaxHighlighter files. At this point in time, the version to download is 1.5.1. The package comes compressed in a RAR file. To extract the RAR file, you will need WinRAR. You should require only the js files and css file in Scripts and Styles folder respectively.

The next thing you need to have is a web hosting server to host the required js and css files. For me, I uses Google Page Creator. Upload all 13 js files and the only 1 cs file onto your web hosting server. You may choose to place them all in the same directory. You should get the absolute URL for all the files e.g. http://lohhonch.googlepages.com/SyntaxHighlighter.css will be for my css file. You will need these URL paths later.

You may now insert the necessary codes onto your Blogger template to get SyntaxHighlighter to work. From your Blogger Dashboard, choose to manage Layout. We shall keep our hands dirty by editing the HTML source of your template. With Edit HTML selected, make sure Expand Widget Templates is checked so no HTML is hidden and are all shown.

Just before </body>, add the below code snippet.

<!-- START OF SyntaxHighlighter -->
                      <link href='http://lohhonch.googlepages.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
                      <script src='http://lohhonch.googlepages.com/shCore.js' type='text/javascript'/>
                      <script src='http://lohhonch.googlepages.com/shBrushCpp.js' type='text/javascript'/>
                      <script src='http://lohhonch.googlepages.com/shBrushCSharp.js' type='text/javascript'/>
                      <script src='http://lohhonch.googlepages.com/shBrushCss.js' type='text/javascript'/>
                      <script src='http://lohhonch.googlepages.com/shBrushDelphi.js' type='text/javascript'/>
                      <script src='http://lohhonch.googlepages.com/shBrushJava.js' type='text/javascript'/>
                      <script src='http://lohhonch.googlepages.com/shBrushJScript.js' type='text/javascript'/>
                      <script src='http://lohhonch.googlepages.com/shBrushPhp.js' type='text/javascript'/>
                      <script src='http://lohhonch.googlepages.com/shBrushPython.js' type='text/javascript'/>
                      <script src='http://lohhonch.googlepages.com/shBrushRuby.js' type='text/javascript'/>
                      <script src='http://lohhonch.googlepages.com/shBrushSql.js' type='text/javascript'/>
                      <script src='http://lohhonch.googlepages.com/shBrushVb.js' type='text/javascript'/>
                      <script src='http://lohhonch.googlepages.com/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://lohhonch.googlepages.com/clipboard.swf";
                      dp.SyntaxHighlighter.HighlightAll("code");
                      //]]>
                      </script>
                      <!-- END OF SyntaxHighlighter -->

Select all Open in new window

Please note that you are to replace all occurrences of http://lohhonch.googlepages.com/ above with your own website. Once all are done, you will need to save to make sure changes are committed.

To insert a code snippet, read http://code.google.com/p/syntaxhighlighter/wiki/Usage. You are DONE!

[ Google Prettify ]

Homepage: http://code.google.com/p/google-code-prettify/
Usage: http://google-code-prettify.googlecode.com/svn/trunk/README.html

Similar to SyntaxHighlighter, you will need to download Prettify package. At this point in time, the latest release is 14 Jul 2008 version. Download and extract prettify-14-Jul-2008.zip. In total, there is 1 js file and 1 css file. Upload them to your own web hosting server and then follow instructions from http://google-code-prettify.googlecode.com/svn/trunk/README.html on integration and usage.

[ Code Snippet Plugin for Windows Live Writer ]

Homepage: http://lvildosola.blogspot.com/2007/02/code-snippet-plugin-for-windows-live.html

I shall not elaborate much on this method since I am not in favour of it. However, the instructions on the homepage itself is quite comprehensive and there should not be a problem following them.

I hope this article is helpful enough to answer "How to Insert Code Snippet on Blogger".

Alternatively, the above article can be found on my blog via http://hongjun.blogspot.com/2008/07/how-to-insert-code-snippet-on-blogger.html