Simon W. Jackson
Back to blog
•
2 min read

Code highlighting for a ghost blog

Table of Contents

I’ve been loving my fresh install of the ghost blogging platform. It has a clean interface with a very small feature set. However, it lacks builtin syntax highlighting (for good reason).

Thankfully, there is a drop-in solution to this problem: highlight.js

Blog Header Section

The following code goes in the Blog header code block on the Code Injection page

Choose your color

First, lets choose the appropriate style (colors) that we want to use. You can choose your colors on the highlight.js demo page. Once you’ve made your selection, head over to highlight.js CDN and grab the link that corresponds to the style of your choice.

We will need to include the highlight.js stylesheet at the top of the header section. I am slightly partial to atoms dark mode colors, so that’s the one we will use for this example.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/atom-one-dark.min.css">

Next, lets override the default ghost styles for code blocks. If we don’t do this, we might end up with some extra styles that may not flow nicely with the styles we are adding.

pre {
    border-width: 0px;
    padding: 0 0 0 0;
    background-color: none;
}

.post-content pre > code {
    padding: 2em;
}

I added some thick padding to the code blocks. This is completely optional, but I think this helps put more focus on the code

The following code goes in the Blog Footer code block on the Code Injection page

Now we can inject the highlight.js payload and initialize it.

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>  
<script>hljs.initHighlightingOnLoad();</script>

That’s it, your blog just got a bit sexier!

Chaining in Underscore.js
Hidden feature in Stylus - Named Parameters