October 29, 2015

Adding a Syntax Highlighter to Blogger

After some researching, I've decided to use Google's code-prettify to highlight syntax on my blog posts. There are several options out there, but code-prettify is simple to setup and use, open source, has good enough highlighting, and hosted on a CDN.

To add to Blogger, edit the HTML of the template and add the following right before the <head/>:

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

To use, add a <pre> block with the class="prettyprint" in the posts. Don't forget to escape the content as needed.

I've also customized it a little to reduce the default font size, though I might remove it later:

<style type='text/css'>
  pre.prettyprint {  
    font-size: 0.8em;
  }
</style>