I’ll keep this post short and sweet since it’s almost time to eat! Download Alex Gorbatchev’s SyntaxHighlighter and extract the files to the root of your website in a folder called syntaxhighlighter, so that the paths of the three folders will be:
- /syntaxhighlighter/scripts
- /syntaxhighlighter/src
- /syntaxhighlighter/styles
Now you need to add the following code to the HTML header section of any page that will display the formatted code syntax. In Community Server we can add code to the header of every page on the site by inserting it into the Raw Header field.
Add the following code…
<!-- SYNTAX HIGHLIGHTER -->
<script type="text/javascript" src="/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushScala.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="/syntaxhighlighter/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="/syntaxhighlighter/styles/shThemeDefault.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = '/syntaxhighlighter/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
… to the headers of your website files. Login as an administrator and browse to Control Panel –> Administration –> Settings –> Site Name & Description –> Raw Header.
Now if you format blocks of HTML code using the correct tags, the syntax will be highlighted. Give it a try with Windows Live Writer and the Syntax Highlighter plugin.