How to Make Code Blocks Look Nice on Your Squarespace Website (Add Syntax Highlighting)

Are you using code blocks on your Squarespace site but want to make them look nicer?

I definitely know what you mean. Squarespace by default has pretty plain code blocks, making the code harder to read, and overall just not as nice to look at.

Just look at how sad they look!!

This looks like how cavemen coded.

I’ll show you how, in like 2 minutes, you can make them look something like this!

They’re so beautiful my eyes are tearing up.

Step 1: Go to the Code Injection part of your Squarespace dashboard

This can be found by going to Website -> Pages -> Website Tools -> Code Injection.

Step 2: Add some code to the Header and Footer part of Code Injection

You’ll add this to the Header:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/monokai-sublime.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

And this to the Footer:

<script>hljs.highlightAll();</script>

The final result will look like this:

These lines of code will add syntax highlighting to your markdown code blocks.

Step 3: When adding a block, use the Markdown block and tell it what language you are using.

Now, instead of using the code block, you will use the Markdown block.

Use the markdown block, Luke!

And in the markdown block, the way you tell it that you want to show a code block is to use 6 backticks! Three before and 3 after! And you can also tell it the language of the code inside the code block so that it will highlight it more accurately!

The code isn’t highlighted right now, but it will be after I save.

And that’s it!

If you want to know what languages are supported by markdown, you can find a comprehensive list here: https://github.com/jincheng9/markdown_supported_languages

Conclusion

Even though this may not seem too difficult, it took me some time, even as a developer to get all of this working, so I hope it saves you some time! In case you are curious, the library that is helping us highlight our code is called highlight.js and if you’d like to customize the colors you use, you can learn more about it here: https://highlightjs.org/