Displaying Formatted Source Code in a SquareSpace Website
Mon, April 12, 2010 at 10:07 PM
Paul Cormier in Coding, Design

This post will cover how to integrate Alex Gorbatchev's excellent SyntaxHighlighter javascript tool so that any code snippets you include in your blog post will by nicely formatted with line numbers, color-coding and more. This is also known as pretty-printing your source code.

This technique works for source code in any of the following languages: ActionScript, Ada, Assembler, ASM/NASM/MASM2, AppleScript, AutoHotKey, Bash/Shell, Batch, C#, C++, Clojure, ColdFusion, CSS, Delphi, Diff, Erlang, F#, Groovy, Java, JavaFX, JavaScript, LaTeX, LSL, Lua, Mathematica, MATLAB, Objective-C/Cocoa, Oxygene, Perl, PHP, Plain Text, PowerShell, Processing, Python, RouterOS, RPG/ILE-RPG, Ruby, Sahi, Scala, SQL, Visual Basic, YAML, XML

1. Download the latest version of SyntaxHighlighter

From: http://alexgorbatchev.com/SyntaxHighlighter/download/

Support for different source languages is enabled through individual "brush" files. Some come bundled with the download, others must be downloaded separately. See the brushes page.

2. Create a directory in your SquareSpace Storage

Create a directory called syntaxhighlighter in your storage folder.

3. Upload the ZIP file to your SquareSpace Storage

Upload the previously downloaded file to the syntaxhighlighter folder created in the previous step. Make sure that Decompress Zip Files After Uploading is checked.

4. Remove unneeded files

You can delete the folder called src to save storage space.

5. Insert the javascript Extra Header Code.

Using the SquareSpace Code Injection feature under Website Settings, add the following code to the Extra Header Code section.

<!--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/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" />

6. Insert the javascript Post-canvas HTML.

Using the SquareSpace Code Injection feature again, add the following code to the Post-canvas HTML section.

<script type="text/javascript">

Creating and Editing a Journal Post with Formatted Source Code

Your SquareSpace site is now ready for journal entries with formatted code. First you need to finish writing your journal entry without the source code sections. Once ready for the source code segments, do the following:

A - Replace all < symbols in your source code with &lt;

Fire up your favorite text editor and replace all those < characters with &lt; to ensure your post will display correctly in RSS readers. (Note: MS Word is NOT a text editor, Notepad is.)

B - Switch the SquareSpace Post editor to Raw HTML Mode

This prevents SquareSpace from reformatting the raw source code you paste within your journal entry.

C - Insert your code wrapped in <pre></pre>

Paste your code inside of <pre></pre> tags in Raw HTML Mode as in the example below.

<pre class="brush: js">
    function foo() {
    	var s = 'Hello World!';

Ensure the correct brush alias is applied as a class to properly format your code based on the desired syntax.

Important: from this point forward, all edits must be done and saved in Raw HTML mode to preserve your source code formatting.

D - (Optional) Modify configuration Options or Theme

Refer to the Configuration Docs to modify features or to change themes.

SyntaxHighlighter is licenced under LGPL 3 and while being free of charge is a work of one man who needs beer, ie if you are using SyntaxHighlighter, please donate.

Article originally appeared on (http://www.webmasterymadesimple.com/).
See website for complete article licensing information.