This is essentially just a quick note to myself but you might find it useful as well.

Here is how you can add [code] syntax highlighting to your ghost blog in less than 5 minutes.

  • Go and download Prism JS
  • Place the js file in content/themes/casper/assets/js/prism.js
  • Place the css file in content/themes/casper/assets/css/prism.css
  • Edit default.hbs located at content/themes/casper/default.hbs to include the css and js files

You can simply paste it after the other css includes
<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />

and the js before the closing body tag
<script type="text/javascript" src="{{asset "js/prism.js"}}"></script>

That's it.

Update: After recently updating my blog I had to add syntax highlighting again and I discovered that there is a CDN for prismjs. This makes it much easier to add syntax highlighting to your ghost blog and does not require you to make changes to your templates nor add the files on your server.

Go to your ghost blog dashboard
ghost-blog-code-injection

then add the scripts you need from cdnjs for prism
ghost-blog-code-injection-scripts

As a minimum you should add the core css for prism in the header section

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/themes/prism.min.css" integrity="sha256-N1K43s+8twRa+tzzoF3V8EgssdDiZ6kd9r8Rfgg8kZU=" crossorigin="anonymous" />

and the core prism js in the footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/prism.min.js" integrity="sha256-jTGzLAqOAcOL+ALD2f2tvFY7fs6dwkOeo88xiuVHaRk=" crossorigin="anonymous"></script>

then afterwards you can add plugins and components as you like e.g. if you would like syntax highlighting for javascript

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/components/prism-javascript.min.js" integrity="sha256-zXG2AZ3GZscmzzK3ccJwzJbfTEmLILTJ6TY4NZm1VZM=" crossorigin="anonymous"></script>

example:

function hi() {
    console.log('hi');
}