One thing I definitely needed to be able to do on Squarespace is properly format any source code I might have in a blog post.

I currently have one posted with code here. The Python code in the post is nicely formatted.

To do this, I followed the instructions at http://www.webmasterymadesimple.com/blog/displaying-formatted-source-code-in-a-squarespace-website.html For the most part I just followed the steps one by one, but there were a few wrinkles.

I'm going to write my own version of the steps. These essentially match the original article above, but I'll call-out when I had to do something different.

Step 1: Download the latest version of SyntaxHighlighter

This worked fine for me. At the time of writing, the latest version is 3.0.83

Step 2: Uploading the SyntaxHighlighter source

This didn't work quite right. The original post calls for creating a directory, and then uploading into directory. For me, that ended up creating too many directories in the hierarchy. Instead, I skipped creating my own directory and just uploaded syntaxhighlighter_3.0.83.zip into the root of my storage area, remembering to check the Decompress Zip Files After Uploading option.

Then I simply renamed the uncompressed directory from syntaxhighlighter_3.0.83 to syntaxhighlighter

Step 3: Configuring SyntaxHighlighter

Here we add some Javascript to the Code Injection area of Squarespace. Go to Website Settings -> Code Injection and paste the following into the Extra Header Code area:

<!--SyntaxHighlighter code-->
<script type="text/javascript" 
src="/storage/syntaxhighlighter/scripts/shCore.js"></script>

<!-- At least one brush, here we choose JS. You need to include a brush 
for every language you want to highlight -->
<script type="text/javascript"
src="/storage/syntaxhighlighter/scripts/shBrushPython.js"></script>
<script type="text/javascript"
src="/storage/syntaxhighlighter/scripts/shBrushJScript.js"></script>

<!-- Include *at least* the core style and default theme -->
<link href="/storage/syntaxhighlighter/styles/shCore.css"
rel="stylesheet" type="text/css" />
<link href="/storage/syntaxhighlighter/styles/shThemeDefault.css"
rel="Stylesheet" type="text/css" />

The main difference between what I have here and the original post is the addition of the shBrushPython.js line. If you look at the Javascript itself, it tells you that this is required. The original blog post didn't explicitly mention to look, so I didn't initially realize it had to be done.

Step 4: Turning on the SyntaxHighlighter

The original post calls for adding some Javascript to the Post-canvas HTML section. Unfortunately if you just have the Standard account, you don't get access to that. Instead, you need to switch your site to Structure view, scroll to the bottom of the page and click Edit Website Footer, and then insert the following code there:

<script type="text/javascript">
     SyntaxHighlighter.all()
</script>

That's it for getting it installed properly. In terms of creating posts that use this feature, I'll refer you back to the original post, as all of his instructions there worked just fine for me. You only need to make sure that instead of brush: js you use brush: python