Until recently, I used gists to format and present code samples on this site. Github.com is awesome and has changed the way many of us work, but it’s not always the fastest site on the net — many times it would take several seconds to show a few gists on my site. I needed to find a different way to show these code samples.
Enter highlight.js. Usage is simple; just include it in the header of your page template as normal, and then call hljs.initHighlightingOnLoad(); on page load. The library will automatically recognize a handful of languages and colorize appropriately based on which CSS file you prefer (the package includes many sample CSS files to colorize the code block). This site currently uses zenburn.css.
Now, just wrap your code block in <pre><code></code></pre> tags and hit refresh.
I’ve further styled my code block like so (using SASS):
pre code
:font 9px Monaco, "Bitstream Vera Sans Mono", monospace
:color #FFF
:background #111
:overflow auto
:display block
:padding 15px
:padding-top 0px
:margin 2em 0em
:whitespace pre
code
:font 9px Monaco, "Bitstream Vera Sans Mono", monospace
:background #342
:color #9F3
:padding 2px 5px
