Adding code highlighting to Ghost blog

Running any kind of code related blog on the Ghost platform would eventually require adding some syntax highlighting to your code snippets. The easiest solution is usin Prism.js library and the quickest way to do that is linking it directly from CDN.

Let's find some resources and link them to the blog!

Everything should be put in fields inside Code Injection menu tab:

CSS should be places inside Blog Header field:

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

JS should be places inside Blog Footer:

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

Now when core files are in place you should think for a while about languages that are going to be used. Language-specific files should be placed in the Blog Footer section of your Code Injection tab below the Prism.js core. In this example I will add PHP, CSS, HTML and JS support:

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

As you may noticed the CDN path for every language is generic, so you should be able to just guess it if you need some more urls. Just to make sure you may also check official CDN files list at https://cdnjs.com/libraries/prism

NOTE: In the examples above I've used Prism.js 1.6.0 version but chances are that when you are reading this post there is already a newer version. Check out Prism.js site to make sure you are using most recent release.

Of course in order to trigger correct syntax highlighting you have to define language used in the sample by appending its name after code block marks. As an example, in order to trigger Javascript highlighting you should write your code inside:

```javascript
// here is your JS code
```

As a result of all the efforts, you should see nicely highlighted code. Here is an example from one of my posts: