How to Set Up Syntax Highlighting with Ghost and Prism

There really isn't a lot of magic to it, but maybe it was less straightforward for me because I didn't read the documentation super well. Or maybe I did and the information was missing. You'll never know! Getting to the point, there is really only a couple of things you need to do.

Installing Prism

Go to the management portal for your Ghost blog, click on the gear icon on the bottom left nav to get to Settings, and then scroll to the bottom of that screen where you see Code injection under the Advanced section and click on that.

When that loads, you'll see two big fields for adding markup to the Site Header and Site Footer. That's where you'll want to post the Prism CSS and Prism JavaScript references respectively.

It was recommended in the official Ghost post about syntax highlighting to pull the references from CDN JS.

For 1.23.0, I have the following blocks configured in those fields:

Site Header

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-okaidia.min.css" integrity="sha512-mIs9kKbaw6JZFfSuo+MovjU+Ntggfoj8RwAmJbVXQ5mkAX5LlgETQEweFPI18humSPHymTb5iikEOKWF7I8ncQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Site Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js" integrity="sha512-YBk7HhgDZvBxmtOfUdvX0z8IH2d10Hp3aEygaMNhtF8fSOvBZ16D/1bXZTJV6ndk/L/DlXxYStP8jrF77v2MIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Creating Code Blocks

In order to create code blocks with Ghost, all you have to do is start a new line with the following syntax and hit enter:

```

Adding Language Support

What you might notice is that when you preview your post the highlighting isn't working correctly. Out of the box, it only supports a subset of languages.

To add more language support, all you have to do is go back to CDN JS and choose the JS file that corresponds to the language you want to use on your blog.

For Go, it wasn't supported right away and I only got highlighting work after I added the following snippet to the Site Footer field:

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-go.min.js" integrity="sha512-SgF1uayJ2/8TV+MhLasqygnm++vYRXswmrR2ZAmUCL4pXtf+6KzUgXPpn10Y6xca658sxOQEOsoP3MChfhke5A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

It went from looking like this:

func hello() {
	fmt.Println("Hello!")
}

To this:

func hello() {
	fmt.Println("Hello!")
}

That's it! Happy coding!