Add syntax highlighting to Ghost with Prism.JS

We are software development company and as such, we will blog about code from time to time. I know that I would do it as I am one of the company's developers. That's why we needed to add syntax highlighting to our blog. Ghost is really nice platform (even though is not completely finished yet) and it's a breeze to extend to meet your needs.

Prism.JS

For syntax highlighting library, we choose Prism.JS, which is really nice and as the site says, it's "blazing fast" and we like fast. And it has a nice set of predefined themes and some useful plugins, so it can meet your requirements.

"Prism.JS is awesome".split(' ').map { |word| word.capitalize }.join(' ')  

Installation

Installing Prism.JS is pretty easy:

  1. First you need to download it - link
  2. After you select the options you think will fit your needs, download the generated script and style files.
  3. Place the files in the proper assets folders in your theme - content/themes/theme-name/assets/js/prism.js and content/thems/theme-name/assets/css/prism.css
  4. Now what's left to do is just include those files in your layout.

To do so, open content/themes/theme-name/default.hbs file and add <link> tag in the head for the style

{{! Styles'n'Scripts }}
...
<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />  
...

and a <script> tag before the closing <body> tag

    ...
    <script type="text/javascript" src="{{asset "js/prism.js"}}"></script>
</body>  

And you are done

That was easy. Now you are ready to start using the syntax highlighting features provided by PrismJS. The way it works is by looking for a <code class="language-*"></code> elements in your code. So you just need to add the proper class to you code blocks, like so:

 ```language-javascript
 var syntax = new AwesomeFeature();
 ```

And here is how the code looks like when it's rendered.

var syntax = new AwesomeFeature();  

comments powered by Disqus