How to use code snippet in Ghost 5.X with prism.js
If you are using the Ghost platform chances are you are also writing code or blogging about code. Then you probably also want to enhance the code UI. Enter prism.js. It's an easy plugin that just requires you to add their CSS and javascript and - Voila! - they will do everything for you. There are two possible ways to enhance the code UI. Either install prism directly into the theme or just add the CSS and javascript via the Code Injection in the Ghost admin panel. In this blog post, I'm gonna explain how to do the second method.
Adding prism.js directly via the admin panel
At the time of writing this blog post, the latest version of Prism is version 1.29.0, however, you'll want to use the latest version available which can be found here. Be sure to update the links with the latest version number. Also, in this code I am using the Prism theme "Tomorrow Night", but you can choose any of the themes available here.
- Login to the Ghost admin portal (usually located at https://example.com/Ghost)
- Click on the gear icon on the bottom left next to your profile picture
- Go into "Code Injections" located under the Settings page
- You will face two boxes - "Site Header" and "Site Footer".
- Add the following to the "Site Header":
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />- Add the following to the "Site Footer":
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>- Press on "Save" located in the top right corner
That's it! The script "prism-autoloader.min.js" will automatically load the languages you need and highlight the languages. For example, if you have Powershell and Javascript the autoloader will ensure that those languages are highlighted properly. Although, you won't be able to see the difference in the editor. You need to publish the content to see the improvement.