Rowanto Luo


Just another blog. or log.


Add automatic code or syntax highlighting in your ghost blog

Recently, I switched to the Ghost blogging platform. I must say that it's actually quite nice. Well, it's still young, and some stuff needs to be taken care of. You need to use "forever" or an init.d script and monitoring to make sure it will stay running. You have to take care of setting up the mail service because it still can't do it automatically like other platform, etc, etc. Well, you can also pay them to host it for you and forgot all those stuffs though.

One of the thing you need to take care, is the code or syntax highlighting. The ghost blogging platform doesn't have one built in. After googling for a while, most of the guide is using PrismJS. Well, what I don't like is. If you want to activate the syntax highlighting, you need to write a special tag in front in order for it to be activated. But I want all of my pre tag to be automatically syntax or code highlighted. What do I do?

That's when I found HighlightJS. It's really easy. Just go to your theme's default.hbs, and link the javascript and css files.

Javascript section of default.hbs

...

{{! The main JavaScript file for Casper }}
<script type="text/javascript" src="{{asset "js/main.js"}}"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js"></script>
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>

...

CSS section of default.hbs

...

{{! Styles and Scripts }}
<link rel="stylesheet" type="text/css" href="{{asset "css/uno.css"}}" />
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/monokai_sublime.min.css">

...

And voila! All you existing codes in your Ghost blog will be automatically syntax highlighted. Easy and fast. No modification needed, no special tag to activate, and you can just write your code like usual using the four spaces before code in your markdown.

You can change the css class to use other color scheme from HighlightJS. Enjoy!