How to Add Syntax Highlighting to Ghost

How to Add Syntax Highlighting to Ghost

Ghost is a great publishing platform, but by default it doesn’t include syntax highlighting. If you run a code related blog on Ghost you probably need some syntax highlighting for your code snippets.

Adding code highlighting Ghost is actually quite easy and there are a couple of plugins that can be used for this purpose, such as:

In my opinion Prism.js is the best option as it is the most robust and well documented option. So for the purpose of this tutorial this is what I will use.

Add code highlighting using Prism.js

There are different ways to add the Prism.js plugin. The simplest one would be using Ghost’s Code Injection feature.

Go to Settings > Code Injection from the admin menu.

Then add the following line to the Blog Header:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/themes/prism.min.css"></script>

and this one to the Blog Footer:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/prism.min.js"></script>

Now that the the core files are included, you have to think about which languages you want to highlight, for example to support SASS, CSS and JS highlighting you must include the following snippets in the Blog Footer:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/components/prism-css.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/components/prism-javascript.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/components/prism-sass.min.js"></script>

Now everything is ready to highlight some code snippets.

How to use Prism.js

To trigger the syntax highlighting you have to make a small change to how you write your markdown in your blog so that Prism knows what language you write in.

For this in your markdown you have to add the following syntax ``` language before a code snippet and ``` after the code snippet.

For example let’s say we want to highlight some css. The markdown will look like this:

```css
.blog-header {
  padding: 1em;
  background-color: #eee;
}
```

And after the syntax highlighting is applied it will result in something like this depending on the theme used:

.blog-header {
  padding: 1em;
  background-color: #eee;
}

That’s it, code highlighting works.

Maybe you think that including each language you want to highlight separately in the Code Injection of Ghost can be inconvenient, and you are right. Especially if you want to support many languages. So let’s see another way we can install the plugin.

Customizing Prism

Prism offers customization, you can select all the languages you want the highlighting for and download the .js and .css files and host them yourself.

After you have downloaded your customized source files from Prism, you have to include them in your Ghost Theme.

To do this open up the default.hbs file located in the root folder of your theme. Add the .css file in the <head>...</head> section:

<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />

Here prism.css is the customized css file you downloaded earlier you should copy it in the assets/css folder in your theme.

Add the .js file before the closing </body> tag:

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

Similarly to the css file, prism.js is the customized javascript file you downloaded earlier you should copy it in the assets/js folder in your theme.

That is all, now you have syntax highlighting.