Syntax highlighting in your Ghost blog with Prism.js

To make code and markup such as XML and HTML easier to read on a website, you should use syntax highlighting.

Ghost does not have built in syntax highlighting out of the box, but its quite easy to add it!

Theres a library called Prism.js (by Leah Verou) that can add such a feature to your website.

Setting up Prism

  1. Go to the prism download page, and select a theme, and which languages you would like highlight support for.
  2. Download the .css and .js file at the bottom of the page.
  3. Copy prism.js to ghost/content/themes/casper/assets/js
  4. Copy prism.css to ghost/content/themes/casper/assets/css
  5. In the file ghost/content/themes/caspter/deafult.hbs add a link to the prism.css file below the {{! Styles'n'Scripts }} tag:
    {{! Styles'n'Scripts }}
    <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />

6. In the same file, add a script tag to include prism.js:

    {{! The main JavaScript file for Casper }}
    <script type="text/javascript" src="{{asset "js/prism.js"}}"></script>

That should be it, Prism should now be installed.

Using Prism for Syntax highlighted code

When writing a blogpost, you can type:

<p class="awesome">This HTML should be syntax highlighted</p>

And it should look like similar to this (except for the color theme you chose):

<p class="awesome">This HTML should be syntax highlighted</p>  

Prism has a whole lot of options when it comes to languages. You can specify which you want included on the download page.


  • language-java
  • language-markup
  • language-css
  • language-bash
  • language-php
  • language-ini
  • language-sql
comments powered by Disqus