Syntax highlighting in your Ghost blog with Prism.js

To make code and markup such as XML and HTML easier to read on a website, you should use syntax highlighting.

Ghost does not have built in syntax highlighting out of the box, but its quite easy to add it!

Theres a library called Prism.js (by Leah Verou) that can add such a feature to your website.

Setting up Prism

Go to the prism download page, and select a theme, and which languages you would like highlight support for.
Download the .css and .js file at the bottom of the page.
Copy prism.js to ghost/content/themes/casper/assets/js
Copy prism.css to ghost/content/themes/casper/assets/css
In the file ghost/content/themes/caspter/deafult.hbs add a link to the prism.css file below the {{! Styles'n'Scripts }} tag:

    {{! Styles'n'Scripts }}
    <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />

6. In the same file, add a script tag to include prism.js:

    {{! The main JavaScript file for Casper }}
    <script type="text/javascript" src="{{asset "js/prism.js"}}"></script>

That should be it, Prism should now be installed.

When writing a blogpost, you can type:

```language-markup
<p class="awesome">This HTML should be syntax highlighted</p>
```

And it should look like similar to this (except for the color theme you chose):

<p class="awesome">This HTML should be syntax highlighted</p>

Prism has a whole lot of options when it comes to languages. You can specify which you want included on the download page.

Examples: