Adding syntax highlighting to Ghost's default theme

[This approach as subsequently started to fail for me, so I have switched to the technique outlined for using Prism; it's a bit manual to have to list every language you want highlighted, but it works with the Casper 2.2.1 theme]

When moving this blog from Silvrback to Ghost(Pro) the one thing I had to figure out was how to get syntax highlighting for source code. Silvrback supported the GitHub-style code block markup, e.g.:

def foo(): pass

Ghost's default Casper theme, though, has no included syntax highlighting (I assume so every blog doesn't have to pay the overhead cost). That meant I had to find a solution to this problem, else I would not be switching to Ghost.

In the end I found highlight.js. It's hosted on Cloudflare so I was able to use Ghost's Code Injection feature to add the appropriate tags in the header (and specify a non-default theme to get richer Python highlighting):

<!-- Agate theme -->
<link rel="stylesheet" href="//">
<script src="//"></script>

The only real hitch is that the on-load registration that highlight.js uses doesn't seem to mesh with Ghost and/or the Casper theme. In the end I just followed the docs for highlight.js to turn on the highlighting in some JavaScript I put in a <script> tag in the footer (along with tweaking the code to not rely on jQuery):

activateHighlight = function() {
    document.querySelectorAll("pre code").forEach(
        function(currentValue, currentIndex, listObj) {

if (window.attachEvent) {
    window.attachEvent('onload', loadHighlight);
} else {
    if (window.onload) {
		var originalOnload = window.onload;
    	var newOnload = function(evt) {
    	window.onload = newOnload;
    } else {
        window.onload = activateHighlight;

If the above is syntax highlighted then it works. 😊 The last step was to visit highlight.js on to register for release notifications. That way I know when I need to update the URLs to newer versions.

Overall not complicated and I'm happy with the final outcome!