Sunday, July 27, 2008

How to Insert Code Snippet on Blogger

I have received a couple of emails for advice on "How to Insert Code Snippet On Blogger". I thought it would be good if I can share this "How-To" with you.

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 -->

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".

11 comments:

  1. Hey, thanks for the wonderful tutorial. I used for setting up my SyntaxHighlighter and have just posted about it on my blog. Keep up the good work.

    ReplyDelete
  2. No problem :)
    Glad you got it to work.

    hongjun

    ReplyDelete
  3. SyntaxHighlighter doesn't seem to work with RSS feeds (at least in my case http://itdevspace.blogspot.com). I tried Code Snippet for Windows Live Writer but can't get around the extra BR lines. Any ideas?

    ReplyDelete
  4. Looks like this is a limitation.

    ReplyDelete
  5. Did you try using <pre> instead of <textarea>?

    ReplyDelete
  6. Thanks.. it worked for me and now I am successfully using it in my blog.
    http://neeraj-learn.blogspot.com

    ReplyDelete
  7. Hi.
    I tried as per you suggested and it's not working properly.
    I have pasted code just before body-end tag. and all the files (including js/css/swf) to my google sites and changed URL as per ur comment.

    I'm pre tag for code and its not recognizing the codes
    Could you please help in finding the possible errors.

    ReplyDelete
  8. hey.thanks for the nice post.is Google Page Creator working now. i cant find it. or is there any other way to host files.
    thanks in advance.

    ReplyDelete

Do provide your constructive comment. I appreciate that.