How to add syntax highlighting to Posthaven

How to add syntax highlighting to Posthaven

I recently gave Posthaven a shot for hosting my blog. While ultimately I decided to go with Ghost instead due to the lack of a few features (syntax highlighting, custom URLs, image headers, markdown support), I tried to dirty my hands and hack together a solution that would allow me to enable syntax highlighting on their platform, and I was able to get it working (using highlight.js). So just in case this helps someone else, I'll leave my solution here.

When writing a new post on Posthaven, you are able to enter some rudimentary custom HTML to the post (no classes, limited elements, but it works™️).

So first things first, when writing your post, you can go into the custom HTML tab, and enter your code inside a <code> element, like so:

<pre><code>
console.log("Hello World!"); // hello!
</pre></code

Anything inside the <pre><code></code></pre> blocks will get syntax highlighted, and the language will be detected automatically.

Here's how to get syntax highlighting working:

  1. Select your site name in the dashboard, go to Settings, Theme, and under Your Themes, hit Manage.

medium_Screen_Shot_2019-01-25_at_7.01.04_PM

  1. Under the Manage Your Themes section, you will see a New Theme button. Click that button, and clone from any of the existing themes that you like best.

  2. Go back to the Manage Your Themes section, and under the theme you just created, you will see a Edit button. Click that.

medium_Screen_Shot_2019-01-25_at_7.08.32_PM

  1. You will see an option to pick the file you want to edit. We will edit the layouts/theme.liquid file.

Inside the <head> section, add this code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/solarized-dark.min.css" />

And just before the closing body tag </body>, add this code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js" type="text/javascript"></script>
<script>hljs.initHighlightingOnLoad();</script>

After this, set your newly created theme as the active theme on your Posthaven blog, and you will be able to see your code syntax highlighted when you open a post.