Add Syntax Highlighting to your Ghost Blog for Dummies (with Prism.js)
January 13, 2019

Add Syntax Highlighting to your Ghost Blog for Dummies (with Prism.js)

  1. Log into your Ghost control panel and open the ===Code injection=== page
  2. Add the required css and js references to your "Blog Header" and "Blog Footer", respectively, from your favorite CDN (or just use CloudFlare)
  3. You can then add code blocks to your editor as follows:

Type "/m" to insert a markdown block

And type ```javascript to add a block of javascript, or ```bash to highlight your bash scripts etc.

Make sure to put the starting and ending Prism markdown around your code on their own lines. If you put them on the same line as your code, it won't work properly. ~Eric Mathison

The end result looks like this:

<script>
    $("pre").addClass("line-numbers");
</script>

There are also some much better written tutorials on the topic:

Add Syntax Highlighting to your Ghost Blog for Dummies (with Prism.js)
Share this