Code snippet in Ghost Blog platform, how does it work?

Ghost Aug 12, 2022

You don't have to be a programmer and focus most of your posts on coding to blog on the Ghost platform, Ghost is easier to use, beginner-friendly with great UI and easily customizable.

There are many amazing features in Ghost platform, One of the things we find hard to do in Ghost Platform is "How to use Code Snippet"

To use Code Snippet in your blog you need to add prism.js. One of the simplest plugins you can add to your ghost platform to improve your code UI. All you need to do is add the prism.js code snippet inside the blog page if you want to have a better code snippet UI.

If you add more codes to your blog then better for you to use a Code snippet in that post only, I would not add it across the whole website since it would unnecessarily get loaded in pages you are not using code snippets.

Follow these steps to add prism.js across all posts -

1) Open your Ghost admin portal,
for example, it will be like "Your_domain_name/ghost"

2) Next go to settings, it can be found on left down side of the window.

3) In Settings under advanced, click on "Code Injection"

4) In the Site Header add this code

<link href="//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css" rel="stylesheet"/>

5) In the Site Footer add this code

<script
type="text/javascript"
src="//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
<script
type="text/javascript"
src="//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/components/prism-js.min.js">
</script>

That's it. Now you can use the multiline code snippet option with syntax highlighting with a much rich UI experience.

To use the code snippet in the blog, all you have to do is start with ```language, for example ```javascript and press Tab

Note - You won't be able to see the difference in the admin page/ editor. You need to publish the content to see the improvement.

Follow these steps to add prism.js to a particular post -

1) Open your Ghost admin portal,
for example, it will be like "Your_domain_name/ghost"

2) Next go to Posts, inside the particular post

3) on the top right side you can find post settings

4) Inside Post Settings, click on "Code Injection"

5) In the Site Header add this code

<link href="//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css" rel="stylesheet"/>

6) In the Site Footer add this code

<script
type="text/javascript"
src="//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
<script
type="text/javascript"
src="//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/components/prism-js.min.js">
</script>

That's it. Now you can use the multiline code snippet option with syntax highlighting with a much rich UI experience.

To use the code snippet in the blog, all you have to do is start with ```language, for example ```javascript