Related Articles
Ghost is one of the best blogging platform that i ever used. It has a lot of features that i love. But, it also has some cons. I have a how to code tutorials a lot and i have difficulty in formatting code syntax to its respective language. When it comes to Prism JS it more easier to me to syntax highlighting codes.
This tutorial will let you guide how to add syntax highlighting to your Ghost blog with simple steps.
Step 1. Add Prism JS library
There are some workaround to add Prism JS to your Ghost theme. The easier way is through code injection.
Navigate to Settings > Code Injections and add Prism JS library as followings.
Add following script to Site Header part.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/themes/prism.min.css"/>And following to Site Footer part.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/prism.min.js"></script>Now, you have added the main files needed for Prism JS works. Then, you need to add which language will be used in your blog. In this example, i will use CSS, Python, Javascript, Java language. You can add other languages to your like. Please refer to CDNJS to add other languages.
Add following to your Site Footer.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-python.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-java.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-css.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-javascript.min.js"></script><!-- Add additional languages here -->Save your changes! Now you have everything set and ready to add some syntax highlighting in your codes.
Step 2. Usage
To activate Prism JS syntax highlighting you need to modify a small change to Markdown syntax so Prism know which language you write in.
It is very important to add your code in the block of
Markdown
For this in your Markdown syntax you need to add this “`language before the code snippets and “` after code snippets.
For example we want to highlight python syntax.
```python# Python3 program to add two numbers num1 = 15num2 = 12# Adding two nos sum = num1 + num2 # printing values print("Sum of {0} and {1} is {2}" .format(num1, num2, sum)) ```When you publish your content, following will be shown in your snippets.
# Python3 program to add two numbers num1 = 15num2 = 12# Adding two nos sum = num1 + num2 # printing values print("Sum of {0} and {1} is {2}" .format(num1, num2, sum)) That’s it. You have working syntax highlighting now in you blog.
If you have any question about how to add syntax highlighting for your Ghost blog, please do not hesitate to drop a message below.
Originally posted 2019-05-04 02:19:29.