Highlight code with Blogger's "Dynamic Views"

This post is about how I got my code snippets to be highlighted on Blogger's recent "Dynamic Views".

I was pointed to this post, but which required a fair amount of steps. Moreover, the resulting functionality only worked for Java and XML coloring, which was the intent of the authors but didn't provide detailed steps on how to get your own languages to work (Python, etc.)

And I wanted...

So I ended up getting it to work with this Javascript code prettifier library.

Short version (tl;dr)

At the end of each of your blog posts, include the following code using the HTML editor:

<script src="https://gist.github.com/aconrad/1522901/raw/e77a27e421b269974e56d1fffc3da23b00ae4b0c/highlight.js" type="text/javascript"></script>

Long version

As of now (Dec 2011), you can't change Blogger's Dynamic Views template to add a Javascript call, such as prettyPrint(). So the only way to do it is to include the call in each of your blog posts. Yes, this is ugly. But it works.

(function() {
    try {
        prettyPrint();
    } catch(e) {
        var scriptId = 'prettyPrinter';
        if (document.getElementById(scriptId) === null) {
            var elem = document.createElement('SCRIPT');
            elem.id = scriptId;
            elem.onload = function() {
                prettyPrint();
            }
            elem.src = "https://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js";
            var theBody = document.getElementsByTagName('body')[0];
            theBody.appendChild(elem);
        }
    }
})();

This is mainly a tweaked rip-off from what the Crux Framework folks came up with. As you can see, the code tries to call prettyPrint() and if it fails (not yet loaded), it will download the prettify.js script and try again.

Once you have this working, you can personalize the CSS. I took the Desert style, pasted it in the Advanced section and use the CSS customization tool of Blogger to adapted it.

/* default scheme ported from vim to google prettify */
pre { display: block; background-color: #221122; padding: 1em; color: #FFFFFF }
pre .nocode { background-color: none; color: #000 }
pre .str { color: #C00000 } /* string */
pre .kwd { color: #C4A000 } /* keyword */
pre .com { color: #3465A4 } /* comment */
pre .typ { color: #06989A } /* type */
pre .lit { color: #C00000 } /* literal */
pre .pun { color: #FFFFFF } /* punctuation */
pre .pln { color: #FFFFFF } /* plaintext */
pre .tag { color: #C4A000 } /* html/xml tag */
pre .atn { color: #4E9A06 } /* attribute name */
pre .atv { color: #C00000 } /* attribute value */
pre .dec { color: #98fb98 } /* decimal */

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }

@media print {
  pre { background-color: none }
  pre .str, code .str { color: #060 }
  pre .kwd, code .kwd { color: #006; font-weight: bold }
  pre .com, code .com { color: #600; font-style: italic }
  pre .typ, code .typ { color: #404; font-weight: bold }
  pre .lit, code .lit { color: #044 }
  pre .pun, code .pun { color: #440 }
  pre .pln, code .pln { color: #000 }
  pre .tag, code .tag { color: #006; font-weight: bold }
  pre .atn, code .atn { color: #404 }
  pre .atv, code .atv { color: #060 }
}

Ironically, I have not taken the time to figure out how to colorize the above CSS properly, which requires this extra Javascript code to be loaded.

Enjoy!