Using code highlighting with Squarespace

To be able to present tech articles, you first need proper information display. In the development world, this means neat code highlighting.

Squarespace does provide code highlighting out of the box for a few languages such as html, css, javascript, but that’s pretty much it. So, we needed something a bit more powerful here, for example prismjs.

I found an excellent article among others, and decided to give it a go, until I stumbled upon hurdles. So, I am going to re-explain the article with an up-to-date opinion.

Getting PrismJS

You can get the code to inject into your blog from their download page. Use check boxes to add languages you are likely to use and plugins you think might be useful.

I would recommend as a minimum, the line-numbers plugin.

Once the javascript and css files are downloaded, open them on your favorite code editor (Atom for me).

Installing PrismJS on Squarespace

To have your Squarespace blog posts run PrismJS, you will need to head towards Pages->Your Blog Page->Settings->Advanced->Page Header Code Injection
In here write:

<script type="text/javascript">[YOUR PRISM.JS FILE CONTENT HERE]</script>

Then replace [YOUR PRISM.JS FILE CONTENT HERE] with the content of your prism.js file.

Final result should look similar to this:

Then head to Design->Custom CSS in Squarespace and post the content of your prism.css file here.

Final result should look similar to this:

Running PrismJS on your code snippets

Now you can use prismjs on your code by creating a code block & selecting HTML type. The Display source needs to stay unchecked and then give it the following content:

<pre class="line-numbers"><code class="language-[your programmation language]">[YOUR CODE SNIPPET]</code></pre>

That’s it! You have now integrated PrismJS into your Squarespace blog articles. It is a bit of an effort each code block, but it is also easily customisable and your readers will thank you for the quality result.