Starting on the Ghost blogging platform was my first jump from a self-hosted blog to hosted solution. Giving up the administrative headaches has allowed me more time to focus on writing content, but there has been one thing missing: syntax highlighting.

Most, if not all, of my posts contain some sort of code. The lack of syntax highlighting for the <pre> tags is less aesthetic appealing and also a usability failure.

Adding highlight.js support

Without investing in uploading a custom Ghost theme with highlight.js support, I came across a post describing how to add highlight.js support to the default Casper theme.

I've updated the code snippet below to use the latest install of highlight.js available.

Paste this in the Ghost admin Code Injection -> Blog Header section:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<style>
  pre {
    word-wrap: normal;
    -moz-hyphens: none;
    -ms-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
    font-size: 0.7em;
    line-height: 1.3em;
  }
    pre code, pre tt {
    white-space: pre;
  }
</style>