Code Snippets Using SyntaxHighlighter on SquareSpace
Tuesday, October 6, 2009 at 6:56PM 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.
Reader Comments (2)
moving my site from wordpress to squarespace...this is exactly what I am looking for...I'll let you know how it goes...
I followed your setup to the T, and then created a pre tag in my journal (below) but it has no effect other than honoring a normal pre-tag (pre-formatted text). Any idea why it no workie? I'm new to SquareSpace, but need to make code highlighting ez so that we can focus on content. Any help would be much appreciated!
<pre class="brush: cpp">void test_MyFunc_should_ParseStuffAndCallTheHandlerForNeatFeatures(void)
{
NEAT_FEATURES_T ExpectedFeatures = { 1, "NeatStuff" };
ParseStuff_ExpectAndReturn("NeatStuff", 1);
HandleNeatFeatures_Expect(ExpectedFeatures);
//Run Actual Function Under Test
MyFunc("NeatStuff");
}
</pre>