Menu

Adding Syntax Highlighting to Your Ghost Blog

Syntax highlighting is an amazing tool for really understanding code. Not only does it make it easier to read, it also gives you a second association for the type of object it represents. For example if you read class Foo you know what this means, however if you read

class Foo
end

You also have an association with a colour. While there's only one class on display here, consider having multiple code blocks or classes. You can easily pick out the classes just based on colour.

It's actually surprisingly easy with Prism.js. Head over to their site and configure your custom download. I configured mine to highlight ruby, html, css, haml, scss, sass and a few others in the solaris light theme.

Once you have downloaded the files you will receive a .zip file containing a prism.js and a prism.css file.