Blogging,  Tips

Add highlight.js to Ghost with Code Injection

Paste highlight.js CSS and script into Ghost Admin Code Injection — no theme file edits required for syntax highlighting.

Add highlight.js to Ghost with Code Injection

Markdown has an out of the box code formatting syntax using the single or triple ` symbol but it does not feature any syntax highlighting or horizontal scrolling for that matter, making somewhat larger code blocks unreadable.

There are quite a few syntax highlighting libraries out there, but by personal preference alone I chose to install highlight.js. One way of installing it is by actually tweaking the ghost files, inserting a couple more tags on the header section. A faster way is to use the Code Injection tool on the admin panel.

Code Injection snippets

In order to enable highlight.js all you have to do is head to your Admin panel > Code Inject and paste the following:

Header

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/tomorrow-night-eighties.min.css">
<style>
  pre {
    word-wrap: normal;
    -moz-hyphens: none;
    -ms-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
    font-size: 0.7em;
    line-height: 1.3em;
  }
    pre code, pre tt {
    white-space: pre;
  }
</style>

Footer

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

And there you go, a quick and dirty installation of highlight.js for your ghost blog. If you decide to keep it, it might be a good idea to actually edit the ghost files as code injection might get quite messy after a couple of those quick and dirty installations.

Related: run Ghost in Docker behind nginx.

Thanks for reading! To stay updated on my latest posts and thoughts, follow me on Twitter @masimplo

Subscribe to masimplo.com

Get the latest posts delivered right to your inbox