Syntax Highlighter on Ghost

13 Nov 2015

I write code, so it would be natural for my blog to have syntax highlighter and turn out it pretty easy to add this feature to ghost blog system.

• Download Prism. Customize your options and download the files.
• Copy those files to your server.
  • Copy prism.js to ghost/content/themes/casper/assets/js
  • Copy prism.css to ghost/content/themes/casper/assets/css.
• Edit your ghost/content/themes/casper/default.hbs file.

Add prism.css

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

Add prism.js

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

That’s it. Now you just need to add the language for your code block, for example.

```language-javascript
console.log('Hello');
````

You should have something like this.

console.log('Hello');

If it’s not working, try to restart your ghost server.

$ sudo service ghost restart