Syntax highlighting in Squarespace

Squarespace includes an option to insert syntax highlighted code blocks.  It works, but it is not very flexible.  Its language support is limited, I couldn't find a way to modify the themes, and the main post editor displays an Embedded Code warning instead of the code itself.  My research into a suitable alternative has not been extensive: I started by experimenting with SyntaxHighlighter, but quickly moved to highlight.js when I realised that it had native support for the wonderful Solarized colour scheme.

Not so fast...

At first, installation using the cdnjs CDN appeared to be simple. Pasting the following code snippet into Settings > Code Injection > Header enabled automatic syntax highlighting of Markdown formatted code blocks:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/solarized_light.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Unfortunately, it wasn't long before I noticed that liberal sprinklings of data-preserve-html-node="true" were being placed in my code (presumably by something Squarespace was doing).

Plain text code blocks

Using plain-text code blocks instead of Markdown formatted code blocks solved that problem, but prevented highlight.js from recognising the code blocks.  highlight.js looks for <pre><code>...</code></pre> tags, which happens to be what Markdown code blocks are wrapped in, but standard plain-text code blocks are wrapped only in <pre> tags.  As Squarespace uses the YUI Library, one simple solution is to manually specify which elements highlight.js should highlight, instead of letting initHighlightingOnLoad() do it for us:

<script>
Y.all('pre.source-code').each(function() {
  hljs.highlightBlock(this.getDOMNode());
});
</script>

I really like Markdown, but I've never liked having to indent code blocks to make them render correctly. Surrounding elements, such as lists, can sometimes throw off the formatting too, so being unable to use Markdown for code isn't much of an issue.

The completed code is:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/solarized_light.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js"></script>
<script>
Y.all('pre.source-code').each(function() {
  hljs.highlightBlock(this.getDOMNode());
});
</script>

To insert a code block that will be syntax highlighted:

  1. In the editor, insert a Code Block
  2. In the Edit Code dialog box, use the drop-down list to change the format to Plain Text
  3. Insert your code

Final tweaks

To tidy things up a little, I wanted to add a faint border around the code block.  Another minor issue was that long lines ran right up to the edge of the box.  overflow: auto truncates the text at the edge of the box, not inside the padding.  Whilst this is technically correct, it's also ugly.  Applying the hljs class to the <pre> element parent node, and applying the border to that element solved the problem.  The final solution was therefore:

<style type="text/css">
  pre.hljs {
    font-size: small;
    margin: 0;
  }
  div.hljs {
    border: 1px solid #eee8d5;
  }
</style>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/solarized_light.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js"></script>
<script>
Y.all('pre.source-code').each(function() {
  hljs.highlightBlock(this.getDOMNode());
  this.ancestor('div').addClass('hljs');
});
</script>

Installing Image::Imlib2 on OS X Lion (10.7.5)

These are some rough notes on how I installed Image::Imlib2 on Mac OS X Lion. The notes assume that Homebrew and Perlbrew are already installed and working.

# Make sure that you *do not* have homebrew's libjpeg installed
brew rm libjpeg

# Install development libraries
brew install libtiff libfreetype

# Install libjpeg with version 80 support
cd /tmp

curl -O http://jpegclub.org/support/files/jpegsrc.v8d1.tar.gz
tar -xvzf jpegsrc.v8d1.tar.gz
cd jpeg-8d1/

./configure
make
make test
sudo make install

# Install imlib2
cd /tmp

curl -OJL http://sourceforge.net/projects/enlightenment/files/imlib2-src/1.4.6/imlib2-1.4.6.tar.gz/download

tar -xvzf imlib2-1.4.6.tar.gz
cd imlib2-1.4.6

sed -i '' 's/@my_libs@//' imlib2-config.in

./configure --disable-amd64
make
sudo make install

# Install Image::Imlib2
cd /tmp

curl -O https://cpan.metacpan.org/authors/id/L/LB/LBROCARD/Image-Imlib2-2.03.tar.gz

tar -xvzf Image-Imlib2-2.03.tar.gz
cd Image-Imlib2-2.03

perl Makefile.PL
CFLAGS=-Wno-comment make
make test
make install