Syntax highlighting on Squarespace

My first post on this blog was just a test, exploring Squarespace’s Markdown support. There I commented that its options for syntax highlighting of code was fairly limited.

“No biggie,” I thought. Embedding gists were a good enough alternative — but it’s grated ever since. So, I did some digging.

Firstly, Squarespace does accomodate displaying some code types. If you want to show off HTML, CSS, JavaScript or Markdown, then the native Code Block may be enough for you.

Confusingly (to me at least), a Squarespace Code Block serves 2 purposes. To insert raw HTML1 into the page (bypassing the CMS’ WYSIWYG editor), or for displaying code on the page inline.

 

Anyway, insufficient! On to my solution. There are a plethora of Syntax Highlighters out there. With the Squarespace platform being structured as it is, a combination of a JavaScript libray and custom CSS seemed the most likely (and sanctioned) way forward. I chose Prism, but this approach should work for many similar libraries. Rainbow, for example2.

Code Injection

Relax, this won’t hurt a bit. Squarespace lets you to add JavaScript in a number of places. I foresee wanting syntax highlighting pretty much site-wide, so I’m injecting the scripts into the ‘head’ tag. This is done in Settings > Advanced > Code Injection > Header. Enter code to load the prism.js file, the languages you wish to support, plus any additional plugins. Here’s mine:

<script src="https://raw.githubusercontent.com/LeaVerou/prism/gh-pages/components/prism-core.min.js"></script>
<script src="https://raw.githubusercontent.com/LeaVerou/prism/gh-pages/components/prism-markup.min.js"></script>
<script src="https://raw.githubusercontent.com/LeaVerou/prism/gh-pages/components/prism-css.min.js"></script>
<script src="https://raw.githubusercontent.com/LeaVerou/prism/gh-pages/components/prism-clike.min.js"></script>
<script src="https://raw.githubusercontent.com/LeaVerou/prism/gh-pages/components/prism-javascript.min.js"></script>
<script src="https://raw.githubusercontent.com/LeaVerou/prism/gh-pages/components/prism-bash.min.js"></script>
<script src="https://raw.githubusercontent.com/LeaVerou/prism/gh-pages/components/prism-python.min.js"></script>
<script src="https://raw.githubusercontent.com/LeaVerou/prism/gh-pages/plugins/line-numbers/prism-line-numbers.min.js"></script>

You may wish to be more discerning about where to inject your JavaScript. Just a specific page, for example, or perhaps just blog posts. This guide talks through the options.

Custom CSS

Prism code styling is done with CSS, and there’s a number of themes to choose from. Pick one to your liking, copy the .css file contents and paste it into Design > Custom CSS. Tweak if needs be, and if you added any plugins, paste their .css in there too.

Why not use @import, and load the CSS straight from GitHub like the JavaScript above? The short answer is, it doesn’t work. For a longer one, see my question on Squarespace Answers.

Code!

That’s it; the pieces are in place. Let’s talk usage. To display syntax-highlighted code:

  1. While editing the page, add a Code Block.
  2. Ensure that HTML is selected and Display Source is not selected.
  3. Enter your code, wrapped in <pre><code class="language-xxxx"> tags. For example:
<pre><code class="language-css">p { color: red }</code></pre>

And there we have it. That’s one thing ticked-off the Squarespace snagging-list. Now, if only I can crack footnotes and emoji, I’d be a completely happy bunny…

 

1. Or Markdown. But there’s already a dedicated Content Block for that. Yeah, like I said, confusing…
2. Tempting (because of Zippy, if no other reason).