So i had the challenge my self and wanted to share a short "how to" blogpost

First of what is syntax highlighting
Wikipedia says:

"Syntax highlighting is a feature of text editors that are used for programming, scripting, or markup languages, such as HTML. The feature displays text, especially source code, in different colours and fonts according to the category of terms.[1] This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers."

There are multiple options for syntax highlighting

I like the Prism.js implementation so thats the one im going to give a small "how to" on.

How to?

In your ghost blog backend you go to  Settings > Code Injection here you find to textarea's here you insert the following in each block.

Add this to the Blog Header:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism-okaidia.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/plugins/unescaped-markup/prism-unescaped-markup.css"/>

As you see i added a theme as well, i like this one "okaidia" scroll down to find a link with more options.

And add this to the Blog Footer:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-javascript.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-css.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-scss.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-markup.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/plugins/unescaped-markup/prism-unescaped-markup.min.js"></script>

So in this example im using syntax highlighting for the following languages:

  • CSS
  • SCSS
  • JS
  • HTML/Markup

If you need other or more languages you can find a full list of plugins urls and themes and more right here: https://cdnjs.com/libraries/prism

Hope you find it useful
Cheers