Code / syntax highlighting in Ghost

Problem

As I write more and more of these posts I realise that I am using snippets of code here and there more and more frequently. Ghost (the CMS this blog runs) has support for some code insertions, however is generally fairly poor. I wanted to see if I could add this into the blog.

Solution

I managed to find another blog post online talking about a javascript and CSS based layer which can add this functionality. Personally speaking I'm strictly back-end in terms of programming, so have absolutely no knowledge on how the javascript and CSS scene works - but I managed to get it working none-the-less!

Step 1: - Customising
Go to: http://prismjs.com/download.html
From here you can customise what exactly you want to have highlighted. Personally speaking I just checked all of the languages and picked a theme I liked. The reason I selected all the languages is because you have to actually specify what language the snippet of code is when you insert it into ghost, therefore you retain the granularity and I have no idea what languages I'll be using on a daily basis so why not check the lot!

Step 2: - Downloading
After you've customised the bits and pieces you can download the CSS and JS files from the site marked by the fairly obvious download buttons. You'll end up with prism.js and prism.css

Step 3: - Uploading
Upload these two files to your server running ghost. They'll need adding to the following directories:

prism.js - /<ghost root dir>/content/themes/<theme name>/assets/js
prism.css - /<ghost root dir>/content/themes/<theme name>/assets/css

If you're running the default theme the theme name will be casper

Step 4: - Tweaking
Open the following file: /<ghost root dir>/content/themes/<theme name>/default.hbs

Look for this line:

<link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />

This is the CSS file for the theme, add the following line underneath it:

<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />

Now in the same file but near the bottom find this line:

<script type="text/javascript" src="{{asset "js/index.js"}}"></script>

And add this line ABOVE it (Mine didn't work below):

<script type="text/javascript" src="{{asset "js/prism.js"}}"></script>

Step 5: - Restart
Restart the webservice as NodeJS does some strange compilation stuff to the files it serves and requires a restart for the changes you made to actually propagate.

Step 6: - Testing
Create a new post and add something like the following:

 ```language-javascript
var s = "JavaScript syntax highlighting";  
    alert(s);   

That will produce the following (slightly depending on your choice of theme):

```language-javascript
var s = "JavaScript syntax highlighting";  
    alert(s);   

Note: You'll have to define the language manually in the tag!

The preview box on the right hand side will NOT show the correct preview of the code. You'll have to post it first.

That's all the stuff I used, but check the link in the references which basically contains all this info + a bit more which I didn't use.

References

http://www.incrediblemolk.com/add-code-highlighting-to-your-ghost-blog/

http://prismjs.com/download.html