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 to a Ghost Theme 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.

Code highlighting 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 Site Header:

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/themes/prism.min.css"
/>

and this one to the Site Footer:

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

Now that 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 Site Footer:

<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/components/prism-css.min.js"
></script>
<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/components/prism-javascript.min.js"
></script>
<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.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.

In Ghost, use the fenced code block syntax and add the language right after the opening backticks.

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

.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.

Note

If you only need basic highlighting, Ghost's built-in code blocks might be enough. Prism is most useful when you want consistent styling across themes, support for many languages, or specific plugins (line numbers, toolbar, etc.).

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.

推荐订阅源

Example blog

Code highlighting Prism.js

How to use Prism.js

Customizing Prism