Thursday, November 13, 2008

Setting up Syntax Highlighter for Blogger

If you have a Blogger account and wish to use the nifty javascript Syntax Highlighter functions follow the instructions below.

Download Syntax Highlighter
  1. You can download the files needed from the google code project page download list
  2. Uncompress the rar file and upload to the server of your choice ( mine was syncoder.com ).
  3. Write down the path to these files for later use
Edit your blogger layout ( html mode )

Once you are editing the html find the < head > tag and insert the following on the lines below it.

< link href='http://example.com/css/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://example.com/js/shCore.js'/>
<script language='javascript' src='http://example.com/js/shBrushPhp.js'/>
<script language='javascript' src='http://example.com/js/shBrushXml.js'/>
<script language='javascript' src='http://example.com/js/shBrushJava.js'/>


Make sure to correctly insert the path to the files for the location that you uploaded them to.

Turn on Syntax Highlighting

find the < /body > tag and insert the following above it.

<script language='javascript'>
dp.SyntaxHighlighter.ClipboardSwf = 'http://example/css/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Once again update the path to the clipboard.swf file. Save the layout and then you can start using the syntax highlighter.

Notes:
You must add the links to the source files for which languages you want to highlight. This example only includes the xml,php,java highlighting links.

0 comments: