So, I didn’t expect to return to blogging with such a cliche, but I couldn’t find this information anywhere else. So, here’s how to set up SyntaxHighlighting for a blog on SquareSpace.
Here is an example code snippet created using Alex Gorbatchev’s Syntax Highlighter tool:
namespace StarterProject.Core
{
public class HelloWorld
{
public string Speak()
{
return "Hello, World!";
}
}
}
It uses a series of javascript libraries and CSS styles to render code blocks in modern browsers.
Scott Hanselman’s blog post, Best Code Syntax Highlighter for Snippets in your Blog. explains how Syntax Highlighter works. He even explains how to use it with PreCode, a LiveWriter plug-in.
I host my blog at SquareSpace, but could not find information on using Syntax Highlighter with it. There is documentation on adding your own javascript and how to use Google Analytics. Between these two pages, I was able to add the configuration necessary to integrate Syntax Highlighter with my blog.
First, login to your SquareSpace website. Then, under the Website Management menu, there is a menu called Data & Media. Select the File Storage submenu. Create a folder called scripts and another one called styles. These folders will be available to your web pages as /storage/scripts and /storage/styles, respectively. Download and unzip the Syntax Highlighter folder. Use the Upload Files button on the File Storage page to upload the contents of the scripts and styles folders to the new folders you just created at SquareSpace.
Under the Website Management menu, there is another menu called Structure. Select the Website Settings submenu item. On the Website Settings page, there is another menu bar. Select the Code Injection menu item which brings up a drop-down menu for the Injection Region and a textarea for the HTML code. Add the following code (you can cut and paste it from here) to the Extra Head Code (within <head> Tag) injection region:
<script type="text/javascript" src="storage/scripts/shCore.js"></script>
<script type="text/javascript" src="storage/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="storage/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="storage/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="storage/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="storage/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="storage/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="storage/scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="storage/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="storage/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="storage/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="storage/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="storage/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="storage/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="storage/scripts/shBrushScala.js"></script>
<script type="text/javascript" src="storage/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="storage/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="storage/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="storage/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="storage/styles/shThemeDefault.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'storage/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
I noticed some issues with preview in LiveWriter and even previewing the blog posts before publishing them, but it looked right for me once I published the blog entries. For reference, I installed Syntax Highlighter version 2.0.320 and PreCode version 5.0.1.
You may also want to adjust the width of your content column to accommodate wider code snippets. If so, I recommend this page, Adjusting Column Widths.