Display code with highlight.js on Ghost

Until recently I used prism.js to display my code snippets in this ghost blog. It is way better that the default code in a <pre> block. But now I stumbled over highlight.js. It does the same thing, but offers way more languages, is able to detect (and therefore display) way more language features and can even detect the language itself (although you can set it specifically). The following is the same code snippet from a PHP reflection article with prism.js and highlight.js (and a slightly different theme).

Code with prism.js

Code with highlight.js

highlight.js displays not just everything prism.js does, but also puts styling on the function name and the variables.

To use it in Ghost, all you need to do is download the highlight.min.js and put it into your content/themes/your-theme/assets/js folder and take one theme and put it into content/themes/your-theme/assets/css. I use the hybrit theme and therefore put the following tags into the default.hbs file:

<link rel="stylesheet" type="text/css" href="{{asset "css/hybrid.css"}}" />
<script type="text/javascript" src="{{asset "js/highlight.min.js"}}"></script>
<script type="text/javascript" src="{{asset "js/init.js"}}"></script>

The init.js is a file where I put all my initialization code and which also contains the initalization for highlight.js:

$(function() {
    hljs.initHighlightingOnLoad();
});

The only thing missing now is the following css snippet to make the long lines not break at the end of the container.

pre code {
    word-wrap: normal;
    white-space: pre;
}

It's still not as good as what real IDEs can deliver, but it's way better then the styling with prism.js.