Skip to main content

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

Popular Posts

Ho Ching named 5th most powerful and is mistaken as first lady by Forbes

Forbes named Singapore Prime Minister wife and CEO of Temasek Holdings, Ho Ching, as the 5th most powerful woman in the world. Ho Ching is mistaken as Singapore's first lady! OMG!

I wonder how can Forbes makes such a blunder. For a complete list, refer to here.

How to stop FortiClient from starting automatically?

Installed FortiClient recently but the challenge in disabling the application/service from running automatically on every start-up annoyed me. Attempt to stop 'FortiClient Service Scheduler' only return 'Parameter is incorrect' error message.

An article on Technet help solve my trouble. To stop FortiClient from starting automatically, try the following:
Shut down FortiClient from the system tray.
Run net stop fortishield on command prompt.
Run msconfig.
On msconfig, switch to the Services tab. Clear the FortiClient Service Scheduler check box and click Apply.Run services.msc on command prompt to open up show all available services.Look for FortiClient Service Scheduler. Switch Startup type to Manual.Restart your computer. FortiClient should not be running automatically the next time round. Hope it helps.