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
- In your Ghost admin panel click on the cog icon.
- 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:
- Theme, change it with your preferred theme.
- Prism Core, core functionality of Prism.
- Autoloader, includes support for all programming languages.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-okaidia.min.css" />
<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.
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.
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.