Installing SyntaxHighlighter on SquareSpace

SyntaxHighlighter is great little library that seamlessly takes care of – you guessed it – code syntax highlighting on your website. As a standalone JS library, it’s platform agnostic and will work on any web publishing system, and this includes SquareSpace. Installation only takes a couple of minutes:

  • Download SyntaxHighlighter
  • Use SS’ Code Injection  feature to include the required script and link tags 
    <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>
    
  • Surround the code you want to highlight in your blog posts with pre tags, with the appropriate brush in the class attribute
    <pre class="brush: js">
    function somePrettyFunction(params) {
    return "Lorem";
    }
    </pre>

/thx Weston Binford

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s