Adding Syntax Highlighting to Ghost without editing any files
4 min read

Adding Syntax Highlighting to Ghost without editing any files

If you want syntax hightlighting on your Ghost blog follow this small tutorial.

message = "Hello World"
print(message)
Python code sample with Syntax Highlighting

Do you want syntax highlighting like the code above or the code in HTML5 Skeleton file on your own Ghost blog? Then follow this small tutorial.

To add syntax highlighting to our Ghost blog we will use Prismjs.

As the title said we won't edit any files, we will use a few lines of code from cdnjs that is hosting the prism libraries and add the to the Code injection section of Ghost.

First go to your Ghost settings by pressing on the Gear icon in your Ghost Admin panel after, go to the advanced section and click on Code Injection.

On the Code Injection page you will see two sections. Site Header and Site Footer.

First we will add some css code with the following tag to the Site Header

prism.min.css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
Copy & paste this code in the Site Header

Now we will add a js code tag to the Site Footer

prism.min.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js" integrity="sha512-hpZ5pDCF2bRCweL5WoA0/N1elet1KYL5mx3LP555Eg/0ZguaHawxNvEjF6O3rufAChs16HVNhEc6blF/rZoowQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Copy & paste this code in the Site Footer

After adding both line of codes to the site header and site footer you press Save and you should have a working Syntax Highlighting on you Ghost blog.

If you also want to use Python syntax highlighting you need to add a extra tag to your site footer

prism-python.min.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-python.min.js" integrity="sha512-yIpe1UXrH/ZWwu3n7MdHNfMbPXftP0jlg9+lRhzlpbolElt33h3PGx9ICzqf/k+yca3QNzqcO3sdtKJuYRTi4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
prism-python.min.js

Prismjs theme's

You can also add some different theme's that will change the look of your syntax highlighting. On this Ghost blog I use the Okaidia theme. To use the same theme add the following tag to your site header

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-okaidia.min.css" integrity="sha512-mIs9kKbaw6JZFfSuo+MovjU+Ntggfoj8RwAmJbVXQ5mkAX5LlgETQEweFPI18humSPHymTb5iikEOKWF7I8ncQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
prism-okaidia.min.css

Other theme's you could use are:

Dark

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-dark.min.css" integrity="sha512-Njdz7T/p6Ud1FiTMqH87bzDxaZBsVNebOWmacBjMdgWyeIhUSFU4V52oGwo3sT+ud+lyIE98sS291/zxBfozKw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
prism-dark.min.css
Dark theme

Funky

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-funky.min.css" integrity="sha512-q59Usnbm/Dz3MeqoMEATHqIwozatJmXr/bFurDR7hpB5e2KxU+j2mp89Am9wq9jwZRaikpnKGHw4LP/Kr9soZQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
prism-funky.min.css
Funky theme

Okaidia

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-okaidia.min.css" integrity="sha512-mIs9kKbaw6JZFfSuo+MovjU+Ntggfoj8RwAmJbVXQ5mkAX5LlgETQEweFPI18humSPHymTb5iikEOKWF7I8ncQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
Okaidia theme

Twilight

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-twilight.min.css" integrity="sha512-ch9ThmrGmkVrVm9tL/puGmSfzQps4yk9LDrWuswb65ZnPOIKuYZBen1yn3ez/fEbgeBqrU/IJ443OqgallfE9Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
prism-twilight.min.css
Twilight theme

Coy

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-coy.min.css" integrity="sha512-CKzEMG9cS0+lcH4wtn/UnxnmxkaTFrviChikDEk1MAWICCSN59sDWIF0Q5oDgdG9lxVrvbENSV1FtjLiBnMx7Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
prism-coy.min.css
Coy theme

Solarized Light

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-solarizedlight.min.css" integrity="sha512-fibfhB71IpdEKqLKXP/96WuX1cTMmvZioYp7T6I+lTbvJrrjEGeyYdAf09GHpFptF8toQ32woGZ8bw9+HjZc0A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
prism-solarizedlight.min.css
Solarized Light theme

Tomorrow Night

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-tomorrow.min.css" integrity="sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXthvkSFWOoGGJgS2CW70VK5dQM5Oh+7ne47s74VTg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
prism-tomorrow.min.css
Tomorrow Night theme

For copy and paste functionality see the following tutorial: Copy and paste with a Ghost code block