Add syntax highlighting to Ghost with Prism.JS

Mirko Akov
Apr 29, 2014 · 2 min read

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();

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store