I was pretty frustrated when I noticed Squarespace doesn’t have code highlighting out-of-the-box and doesn't let you insert <script /> blocks unless you get the business plan. I love the way Squarespace helps you design websites so I purchased a personal plan but I wasn't going to be paying $12 per month and not have highlighted code blocks. I needed to find a workaround. Here's what it looks like:
It looks like the embed option was something I could try and rig to get my damn code blocks. Because I mainly code in C#, the first thing I tried was .NET Fiddle. You can get the <iframe /> HTML snippet via the Share button and paste it into the manual embed window.
Here's what .NET Fiddle looks like:
I don't like how I can't remove the output section of the embedded .NET Fiddle, since not every code snippet is going to have executable code. Also, I wanted a dark themed code highlighting block.
Well hey, if I can add iframes, why not create a simple static HTML page to do the highlighting? GitHub Pages was perfect for this since you can take a public repository and host static content from it. You can turn on GitHub Pages within the repositories settings page.
I wanted to embed an iframe where I could point it to the GitHub Page that took a querystring parameter that was a URL to a raw GitHub hosted code file. Prism.js came to the rescue for the actual highlighting.
Here's the final code I'm using:
The only annoyance is you need to vertically scroll down to even see the horizontal scrollbar. Perhaps there's a way around that. If you have any ideas let me know!