How to use PrettyPrint to format source code in Blogger

If you want to format source code posted to Blogger (BlogSpot), you can use PrettyPrint. PrettyPrint is a JavaScript library that does client-side source code formatting.

Some tutorials encourage the modification of your template's HTML code. I don't like this method, because your HTML code changes are reverted as soon as you switch to another theme or modify the CSS properties.

Here is a more elegant way:

1. In the Blogger.com Blog Administration, click "Layout" in the left navigation bar.
2. Click "Add Gadget" somewhere in your layout, preferably somewhere at the bottom of the page.
3. Choose "HTML/JavaScript" from the "Basics" tab.
4. Give your gadget a name (i.e. "PrettyPrint") and paste the code from below into the "Content" text area.
5. To embed source code, just place it inside of a <pre class="prettyprint">...</pre> tag.

<script type="text/javascript">
    var checkJsTimer;
    function checkJs() {
        if (typeof prettyPrint == 'function') {
            window.clearInterval(checkJsTimer);
            prettyPrint();
        }
    }
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.type = 'text/javascript';
        element.src = "http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js";
        document.body.appendChild(element);
        checkJsTimer = window.setInterval(checkJs, 100);
        element = document.createElement("link");
        element.rel = 'stylesheet';
        element.type = 'text/css';
        element.href = "http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css";
        document.getElementsByTagName('head')[0].appendChild(element);
    }
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>