How to use HighlightJS into Ghost blogging platform

Using HighlighJs inside a Ghost Blog is very easy, you only need to

  1. Include the Stylesheet (a CSS file) of the theme you like.
  2. Include the HighlightJs library.
  3. Initialize the library.
  4. And finally: use it!

For this tutorial pourpose I'm using the Casper theme but you can use your favorite theme as well.

Move into ghost/content/themes/casper folder and open in edit mode the default.hbs file.

Under the {{! Styles'n'Scripts }} comment, add the link to the Stylesheet of the theme you like: follow this link to choose your favorite HighlightJs theme.

{{! Styles'n'Scripts }}
<link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />  
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic|Open+Sans:700,400" />  
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/monokai_sublime.min.css">  

Under the {{! The main JavaScript file for Casper }} comment, add the link to the HighlightJs library and initialize the library.

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

For a full list of available classes corresponding to languages, visit this page.

Examples

If you want to highlight a PHP code snippet, simply include the code between the tags <pre> and <code> tags adding the php class to the <code> tag.

{gfm-js-extract-pre-1}
<?php

/*
|--------------------------------------------------------------------------
| Application Routes
|--------------------------------------------------------------------------
|
| Here is where you can register all of the routes for an application.
| It's a breeze. Simply tell Laravel the URIs it should respond to
| and give it the Closure to execute when that URI is requested.
|
*/

Route::get('/', function()  
{
    return View::make('hello');
});

Same thing for a JavaScript file

{gfm-js-extract-pre-2}
$(document).ready(function() {
    console.log('hello');
});

And for a CSS file

{gfm-js-extract-pre-3}
code {  
  padding: 2px 4px;
  font-size: 90%;
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 4px;
}

To disable highlighting entirely use the nohighlight class.

<pre><code class="nohighlight">This text is not highlighted.</code></pre>

Now you can use HighlightJS to highlight the beautiful code you have written in your blog post.