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