Code Syntax Highlight in Squarespace

My post about Normality of Data and Confidence Intervals was rich of Python code. That wasn’t the first post featuring code snippets, but it was the first time I managed to add syntax highlight directly into my website. In the past I either pasted pretty-printed HTML code from online services like hilite.me, or used an iframe pointing to a GitHub gist. Both solutions were far from ideal.

My website is built using Squarespace, a very convenient website creation and management platform that offers stunning themes, an intuitive interface and several convenient services all in one place. It is an ideal solution to create an eye-pleasing website to host a simple blog, share photos and videos. It is not ideal for sharing technical content as its code blocks have no syntax highlight and no support is offered for displaying equations. In this post I tackle the first problem.

My solution is based on Highlight.js, a syntax highlighter written in JavaScript. What I like about Highlight.js is that it does not require to install anything on my website (something that Squarespace does not allow), it has several syntax highlight themes I can chose from, and it has automatic language detection.

The official instructions can be found here. In my case, all I had to do was to link my website to Highlight.js library, to select one of the available code styles ( I like molokai-sublime) and then to launch initHighlightingOnLoad. All of this can be done by injecting the code below into the header of my website’s pages:

<link rel=“stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/monokai-sublime.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Because the code in my post is Python, one of the most common languages, I can link my pages to the version of the Highlight.js package that is hosted on a public CDN server, without having to install anything on my website.

That’s it. To add beautifully highlighted code to my website all I have to do is to put code in a markdown block between triple backticks. By default Highlight.js tries to guess the programming language, but you can supply the right answer by naming the language after the first triple backticks, right before the code begins, so that this code

```python
def hello_world():
	print("Hi World!)
```

becomes

def hello_world():
	print("Hi World!)

As a final optional step, I modified the CSS of my website to change the font size and line height of the code blocks, so that it better fits with the rest of content of my webpages.

code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4p;
    line-height: 120%;
}

I took me more than I wanted to find a way to add code syntax highlight to my Squarespace website. I hope this post can help you get there faster.