Subscribe to Updates

RSS RSS feed    What is this?

Email By email:

Privacy Assured more »

Topics

Search This Site

Follow on Facebook

 

« A Better State-Province Selector for Your Web Forms | Main | Cheap Meat Never Makes a Good Soup - A Tale of Two Web Developers »
Monday
Apr122010

Displaying Formatted Source Code in a SquareSpace Website

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">
     SyntaxHighlighter.all()
</script>

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!';
        alert(s);
    }
</pre>

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.

References (16)

References allow you to track sources for this article, as well as articles that were written in response to this article.
  • Response
    Response: Java Tutorial
    Displaying Formatted Source Code in a SquareSpace Website - Webmastery Made Simple -
  • Response
    Displaying Formatted Source Code in a SquareSpace Website - Webmastery Made Simple -
  • Response
    Displaying Formatted Source Code in a SquareSpace Website - Webmastery Made Simple -
  • Response
    Displaying Formatted Source Code in a SquareSpace Website - Webmastery Made Simple -
  • Response
    Response: groupwise inc
    Displaying Formatted Source Code in a SquareSpace Website - Webmastery Made Simple -
  • Response
    Response: green.wikia.com
    Displaying Formatted Source Code in a SquareSpace Website - Webmastery Made Simple -
  • Response
    Displaying Formatted Source Code in a SquareSpace Website - Webmastery Made Simple -
  • Response
    Displaying Formatted Source Code in a SquareSpace Website - Webmastery Made Simple -
  • Response
    Displaying Formatted Source Code in a SquareSpace Website - Webmastery Made Simple -
  • Response
    Displaying Formatted Source Code in a SquareSpace Website - Webmastery Made Simple -
  • Response
    Displaying Formatted Source Code in a SquareSpace Website - Webmastery Made Simple -
  • Response
    Displaying Formatted Source Code in a SquareSpace Website - Webmastery Made Simple -
  • Response
    Response: secret info
    Displaying Formatted Source Code in a SquareSpace Website - Webmastery Made Simple -
  • Response
    Displaying Formatted Source Code in a SquareSpace Website - Webmastery Made Simple -
  • Response
    Response: trackback
    Displaying Formatted Source Code in a SquareSpace Website - Webmastery Made Simple -
  • Related

Reader Comments

There are no comments for this journal entry. To create a new comment, use the form below.

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>