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

Evermore

Mirko Akov

Written by

Full stack developer @weareevermore #ruby #elixir #ember.js

Evermore

Evermore

Development consultancy, specialised in building custom web solutions and applications since 2006. Visit us at https://weareevermore.com

Mirko Akov

Written by

Full stack developer @weareevermore #ruby #elixir #ember.js

Evermore

Evermore

Development consultancy, specialised in building custom web solutions and applications since 2006. Visit us at https://weareevermore.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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