Adding syntax highlighting to a default Ghost template is actually remarkably easy with the help of the fantastic Prism library.
From the admin panel of Ghost, go to: Code Injection
. Add the following to the blog head:
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css" rel="stylesheet" />
and add the following to the blog footer:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js" ></script>
Now you just need to make a small change to how you write your markdown in your blog so that Prism know's what language you're writing in.
For example: To specify a code block as JavaScript, I would write the following
```javascript
alert('Hello JavaScript');
```
Further reading:
- To further customize your syntax highlighting, you can generate custom css/js files. You will need to host these somewhere on the internet though. For simplicity I've just used what was available on the CDN
- There is a (more detailed blog on this subject)[http://www.incrediblemolk.com/add-code-highlighting-to-your-ghost-blog/]. This post was inspired by the above