Add Prism.js code highlighting to Ghost

Prism.js is a wonderful little javascript library for highlighting code at runtime. It support various themes + a ton of languages and is really easy to implement in Ghost.

#include <stdio.h>
 
int main()
{
  printf("Hello world\n");
  return 0;
}

Setup

All you have to do is go to prismjs.com and build a version that suits you and upload the css and javascript files into your theme assets folder. And finally add them to the code injection settings in Ghost.

<!-- Add the css in the header -->
<link href="/assets/css/prism.css" rel="stylesheet" />

<!-- And the javascript in the footer -->
<script  type="text/javascript" src="/assets/js/prism.js"></script>

After that all code blocks will be highlighted automatically if you add a language class to your code block in markdown.

 ```language-javascript
 //code here


The code above add a `language-javascript` class to the generated `<code>` block which prism.js will pick up on later and highlight its content.

##Line numbers
There is a really nice plugin available for prism.js which adds line numbers to your code block. Unfortunately it requires you to add a second class to the code block called `line-numbers` and markdown only supports one class per code block.

I solved it by adding a small bit of javascript code that go through all `<code>` tags and add the line number class. It will also check if the class starts with `no-numbers-` and in that case won't show line numbers.

You can add this snippet in the footer part on code injections.
```javascript
<script>
    //Small fix to activate line numbers in prism
    var codes = document.getElementsByTagName('code');
    for (var i = 0; i < codes.length; i++) {
        if (codes[i].className.indexOf('no-numbers-') === 0) {
            codes[i].className = codes[i].className.substring(11);
        }
        else {
            codes[i].className += ' line-numbers'; 
        }
    }
</script>

It's not the cleanest solution perhaps and it could break some themes that might use the code tag. There are other ways of sovling it as well but this was a simple solution that seems to work for now at least.

Menu

Setup