How to add Javascript syntax highlighting to Ghost CMS

If you want to add a code block to Ghost, you can use three backticks:

```

You can even add a coding language like this:

```javascript

However, that won't add any syntax highlighting by default. To make this happen, we need to implement the Prism library.

We can do this easily by going to Settings -> Code injection -> Site header in your Ghost settings, and add these two lines:

<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.js" defer></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism-twilight.min.css">

Now this:

Turns magically into this:

Neat!

Using different themes

Prism supports multiple themes. For example, if you want to want to use a light theme you'd swap prism-twilight.min.css with prism.min.css in your site header.

You can find a list of all the supported themes here.