Adding Syntax Highlighting to your Ghost blog the easy way (5 minutes max)

Adding syntax highlighting to a default Ghost template is actually remarkably easy with the help of the fantastic Prism library.

From the admin panel of Ghost, go to: Code Injection. Add the following to the blog head:

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css" rel="stylesheet" />  

and add the following to the blog footer:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js" ></script>  

Now you just need to make a small change to how you write your markdown in your blog so that Prism know's what language you're writing in.

For example: To specify a code block as JavaScript, I would write the following

```javascript

alert('Hello JavaScript');  
```

Further reading:

  • To further customize your syntax highlighting, you can generate custom css/js files. You will need to host these somewhere on the internet though. For simplicity I've just used what was available on the CDN
  • There is a (more detailed blog on this subject)[http://www.incrediblemolk.com/add-code-highlighting-to-your-ghost-blog/]. This post was inspired by the above