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>

13 thoughts on “How to use PrettyPrint to format source code in Blogger”

  1. Heiner,

    great post. Not having to touch the html layout and not having to upload the .js and .css files is a great plus.

    Good work !

  2. Hi,

    I used what is said in your post to enable prettyprint.

    Thank's a lot, it work's for me.

    But I have to be on a static layout.

    I I choose a dynamic layout (the one I prefere) it doesn't work.

    Do you any idea?

    Thank's

  3. Thanks for the share.. Still works like a charm.

    I was using the link script and body onload function() here at irsah blog, but somehow interfered with my blogger responsive theme (possible jquery/js conflicts?).

    Using your script either thru widget or direct embbed to theme works. Thanks again.

  4. I pasted the above code inside pre tag on a HTML / JavaScript gadget. It is showing PrettyPrint at the point where i added it. But what i am not getting is how can i use this to format my code snippet inside my blog post. please help

  5. Great Information! I am with blogger.com, but somehow it doesn't allow me to use "pre" tags within comments… is there a different way to achieve this for comments fields? Ironically I'm getting the same error leaving this comment 8) "Your HTML cannot be accepted: Tag is not allowed: PRE"

Leave a Reply

Your email address will not be published. Required fields are marked *