SquareSpace - Code Syntax Highlighting

UPDATE: Injection was dropped at some point unless you have a premium account. For a simpler solution, just use a Markdown block, put the code into a Github gist, and paste the embed code (e.g. <script src="https://gist.github.com/stepheng/f2d2f6aa9b4ecdfa5cc9b295f0b0026f.js"></script>) into that and it will work. Less convenient for brief snippets though.

I like to write my blog posts in Markdown. A limitation of Squarespace is that my code blocks are missing syntax highlighting and differentiation from the surrounding code. There are a few posts about this, and I originally looked at this one regarding Prism.js . Unfortunately, those formatting problems mentioned, and the fact that it wasn’t working with my Markdown flow, meant that I wasn’t satisfied with it as a solution. When it comes to blogging, I want as few roadblocks in the way as possible. The extra spacing it put in was just ugly as well.

Another blog post suggested using highlight.js . Following those instructions, I got it working almost immediately. I didn’t bother going further than that initial step as I haven’t (yet) encountered the issues the author mentions.

One thing I had to do was include Swift support as it’s not in the common set.

My injected code (in the footer, as suggested in Mike Raynham’s post ) is below:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/atom-one-light.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/swift.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

It's applied automatically too. And hey, it even works for the example in the post about how to enable syntax highlighting.