How to add a Syntax Highlighter in Ghost

If you want your code to be better readable, a syntax highlighter is a must-have! In this post, I will show you how to set up a syntax highlighter in Ghost using Prism.

1. What is Prism?

Prism is a very popular Syntax Highlighter and the preferred highlighter to use with Ghost. Prism currently supports 272 programming languages, so I am pretty sure your required languages are included. Prism also has options like line numbers and a copy button.

2. Navigate to Code Injection

The easiest way to add Prism to your Ghost website is by adding Prism CDNs within your header and footer. So let's navigate there.

1. In your Ghost admin panel click on the cog icon.

1. Click on Code injection

Now it is time to get the Prism CDNs.

3. Get the Prism scripts

By going to the Prism website you can check which theme you want by clicking on the circles.

After you have made your decision you can go to this website cdnjs and grab the Prism CDNs. Based on your choice you have to select the right CDN. So in my case, I went for Okaidia, so I have to add the theme CDN that ends with okaidia.

You need the following CDNs:

1. Theme, change it with your preferred theme.
2. Prism Core, core functionality of Prism.
3. Autoloader, includes support for all programming languages.

Header

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-okaidia.min.css" />

Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/autoloader/prism-autoloader.min.js"></script>

Make sure you place the theme CDN inside the header and the other 2 CDNs in the footer like I did or else it will not work.

You can also change the autoloader with a language of your choice for example if you want to use Python you can choose this one.

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-python.min.js"></script>

I will go with the autoloader myself but here you have an example with a chosen programming language.

After you have added the CDN do not forget to click the save button.

After you clicked the save button you can click on posts.

4. How to apply the syntax highlighter

Select the post where you want to add a Syntax highlighter or create a new one by clicking on New Post.

In the post editor, you have to type 3 backticks (```), like so:

Now press tab on your keyboard and you will end up with a code block, like this:

In the code block, you can put your code and in the right corner, you can put the language you are using. After you have done that you can click the Preview button.

And if everything went well you will see your Highlighted code block.

5. Conclusion

We have set up a syntax Highlighter in Ghost, using Prism. I hope that this post made everything clear. If you are interested in adding line numbers and/or a copy button, make sure to check out these posts.

How to add line numbers to Prism in Ghost

In this post, I will show you how to add line numbers within your Prism Syntax Highlighters. I will also show you the solutions to common problems people run into when using Prism line numbers. 1. Inject line number CDN’s First, we start by adding the line-numbers CDN’s within our

Code OnwardsTijn van den Eijnde

Add a copy option to your Prism Syntax highlighter in Ghost

To make your Syntax Highlighter more user-friendly it is convenient to add a copy button. In this post, I will show you how to easily add a copy button to your Prism syntax highlighter. 1. Inject copy to clipboard CDN’s into our code First, we start by adding the copy

Code OnwardsTijn van den Eijnde