Adding Syntax Highlighting To Your Ghost Blog

Adding Syntax Highlighting To Your Ghost Blog
Photo by Mitchell Luo / Unsplash

I have just started to explore ghost.io and I wanted a way to add Syntax Highlighting to my site.

Ghost's official documentation mentions a way to achieve this but for some reason I wasn't able to make it work on my site.

It involves adding a light-weight syntax highlighting script called prism to our site's header and footer area.

Once that's done, any code block adding the following format would automatically get the syntax highlighting feature added to it:

```language
some code here
```
sample code block

But it didn't work for me.

After a bit of trial and error, I figured that I needed to use the latest version of the script from the following link: https://cdnjs.com/libraries/prism.

I used the following scripts:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
script for the header
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/prism.min.js" integrity="sha512-RDQSW3KoqJMiX0L/UBgwBmH1EmRYp8LBOiLaA8rBHIy+7OGP/7Gxg8vbt8wG4ZYd29P0Fnoq6+LOytCqx3cyoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
script for the footer

And it worked for me.