How to Prettify Your Code on Google Blogger

This blog post will show you how to add my favorite syntax highlighter, Google Code Prettify with flavor like Twitter Bootstrap to Google's popular blogging platform, Blogger.

First you need to add these javascripts to your blog's template: https://gist.github.com/3481355. Alternatively, you can add to your body tag:

onload='prettyPrint()'

Taken from Twitter Bootstrap's styling, then you add this modified CSS to your blog's template:

.com { color: #93a1a1; }
.prettyprint .com { color: #93a1a1; }
.prettyprint .lit { color: #195f91; }
.prettyprint .pun, .prettyprint .opn, .prettyprint .clo { color: #93a1a1; }
.prettyprint .fun { color: #dc322f; }
.prettyprint .str, .prettyprint .atv { color: #D14; }
.prettyprint .kwd, .prettyprint .linenums .tag { color: #1e347b; }
.prettyprint .typ, .prettyprint .atn, .prettyprint .dec, .prettyprint .var { color: teal; }
.prettyprint .pln { color: #48484c; }

.prettyprint {
  padding: 8px;
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;
  font-size: 12px;
}
.prettyprint .linenums {
  -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
     -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
          box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
}

/* Specify class=linenums on a pre to get line numbering */
.prettyprint ol.linenums {
  margin: 0 0 0 33px; /* IE indents via margin-left */
  margin: 0;
}
.prettyprint ol.linenums li {
  padding-left: 12px;
  color: #bebec5;
  line-height: 18px;
  text-shadow: 0 1px 0 #fff;
}

If you want to get other hosted javascripts, you can try http://cdnjs.com/