Lazy mans guide to code syntax highlighting on Blogger

Having just moved some old blog entries to a brand new blogger.com blog from Wordpress I was looking for an easy way to publish highlighted code in my posts.

There are several different tools freely available such as SyntaxHighlighter, highlight.js and Prettify which I decided on using.

This is how to add Prettify support to your blogger.com blog:

From the blog overview, click the Template menu item:

Click the Edit HTML button to open the template markup in a lightbox:

Find the </head> closing tag (ctrl+f, and search for </head>)
Right above the </head> closing tag, paste the following:

<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(prettyPrint);
</script>
<style type="text/css">
pre.prettyprint {
  margin-top:10px;
  margin-bottom:10px;
  padding:5px;
  border:1px solid #888;
  overflow:auto;
  width:auto;
  max-height:350px;
}

.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }

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

The styles and colors can of course be changed according to your liking. The original styles can be found here

Don't forget to save the template changes:

How to use Prettify once integrated

To highlight some code, just put it inside <pre class="prettyprint"></pre>. Prettify will actually auto detect the programming language but that detection will put some extra strain on the client. For this reason it is better to define the language (in this case javascript) like this:

<pre class="prettyprint lang-js"></pre>

There are a number of built in languages available such as C (lang-c), C++ (lang-cpp), C# (lang-cs), HTML (lang-html), Java (lang-java), javascript (lang-js) and XML (lang-xml). There are also a number of extensions available for other languages.

To use line numbers just add the class linenums like this:

<pre class="prettyprint lang-cs linenums"></pre>

For even more functionality and more supported languages consult the Prettify FAQ.