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="" rel="stylesheet" />  

and add the following to the blog footer:

<script type="text/javascript" src="" ></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


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)[]. This post was inspired by the above