SyntaxHighlighter can produce very clear code highlighting but getting it to work in Squarespace 6 is not straightforward. In this post I describe how I got it running in current browsers.

Installation

In the gist linked HERE you can find code to add to the Code Injection section in the Settings of your Squarespace website. Place the contents of the Header file in the Header area and the contents of the Footer file in the Footer area.

The Header section has to be edited to add the languages to be used (brush in SyntaxHighlighter lingo). In the Footer section, the default language has to be set. Here it is set to the C brush:

brush: js
// Default brush
var brush = "brush: c";

Once configured, any code block will use the default configuration. If you want to change the language of the code, write the language selection on the first line of the code block, as follows:

brush: c
brush: c
int main() {
   return 0;
}

In the above example the C brush is selected. Refer to this SyntaxHighlighter page for other available brushes.

Some examples

A C example:

brush: c
int main(int argc, char **argc) {
   for (int n = 0; n < argc; n++) {
      printf("Argument %d: %s", n, argv[n]);
   }
   return 0;
}

Technical explanation for the curious-minded

The main trick that we need to do to get SyntaxHighlighter to work in Squarespace is annotate the 'code' tag with a class that contains the brush to use:

brush: xml
<code class="brush: c">
int main() {
   return 0;
}
</code>

In the Footer code, this is done by using JQuery. A default language is assigned if this is not overiden in the first line.

In addition, there seems to be a bug in Squarespace where data-preserve-html-node="true" is added for code that looks like an HTML tag inside a markdown block. As longs as Squarespace does not fix this, the behavior is fixed in the Footer code.

1 Comment