Integrate Highlight.js into Ghost

I was searching for a good tutorial on this and found a link so the blog ig suksit.com but unfortunately the wanted entry is not available anymore.

Good to know there are sites like google cache and archiv to view the site in an older state. i used this site

I recover the post here from the cache version in a modified way:

Integrating Highlight.js into Ghost

After I used a lot of code block in the previous post, I found that the default code style in Casper theme was pretty hard to read. There was no syntax highlighting and the lines were wrapped which makes copy/paste harder than it should.

So I googled around for a JavaScript syntax highlighter, the top two candidates were Google Code Prettify and Highlight.js. After seeing some examples for both, I decided to go with Highlight.js so I don’t have to add “prettyprint” to the code blocks, and Highlight.js will automatically apply syntax highlighting to the < pre>< code> blocks that Ghost generated by default.
Add syntax highlighting

We will need to insert the code to include Highlight.js and to perform syntax highlighting in the following file:
content/themes/casper/default.hbs

First we will add the stylesheets for syntax highlighting theme we want. You can see examples of each theme on Highlight.js test page. Click through the styles and remember the name of the theme that you like. FYI, I use “Railscasts” in my blog.

Find the following code:

{{! Styles'n'Scripts }}
<link rel="stylesheet" type="text/css" href="/assets/css/screen.css" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic|Open+Sans:700,400" />

Add this line to the end of it:

<link rel="stylesheet" href="{{asset "/highlighter/styles/default.css"}}">

Replace "default.css" with the name of your wanted style theme.
Then we will include Highlight.js into Ghost, find the following code:

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

Add these two lines to the end of it:

<script src="http://yandex.st/highlightjs/7.4/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

So that it looks like:

{{! The main JavaScript file for Casper }}
<script type="text/javascript" src="/assets/js/index.js"></script>
<script src="http://yandex.st/highlightjs/7.4/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Save default.hbs file and exit.

Now your code blocks will be highlighted properly. However, it’s still wrapped by the width of the content, which makes it hard to read compared to the actual code in text editor. So we should disable line wrapping and enable the horizontal scroll bar in code blocks.

Remove line wrapping

This requires you to modify the stylesheet of Casper, it’s located at:
content/themes/casper/assets/css/screen.css

Actually you can just add the code to the bottom of screen.css and be done with it. But since the CSS file is pretty organized, I decided to put the code into its appropriate section.
Find the following code:

.post-footer .share a:hover {
    color: #50585D;
}

Then add this chunk of code below it:

.post-content pre code {
    overflow: auto;
    word-wrap: normal;
    white-space: pre;
}

So it looks like:

.post-footer .share a:hover {
    color: #50585D;
}

.post-content pre code {
    overflow: auto;
    word-wrap: normal;
    white-space: pre;
}

Save screen.css file and exit.

See the results

You can see the working results in the code blocks in this page. Don’t forget to restart Ghost and refresh the page in order to see the changes.

See it in the MarkDown while writing

So in addition to see it directly in the MarkDown:

• Open core/server/views/default.hbs
• Add the following code before </body>:

{{! Code highlighting with highlight.js }}
<link rel="stylesheet" href="link rel="stylesheet" href="http://yandex.st/highlightjs/7.4/styles/THEME_NAME.min.css">
<script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
<script>
  var timeout, entry = $('.entry-markdown');


  function highlightCode(){
    $('pre code').each(function(i, e){hljs.highlightBlock(e)});
  }


  if(entry){
    $(document).keypress(function(event) {
      clearTimeout(timeout);
      timeout = setTimeout(highlightCode, 2001);
    });
  }


  setTimeout(function() {
    $('.content-list-content li').click(function() {
      highlightCode();
    });
  }, 500);
</script>

And if you want to place code without highlighting, you can use

<pre><code class="nohighlight">No Highlight</code></pre>