Getting SyntaxHighlighter to work with Blogger.com

Just a quick guide to get SyntaxHighlighter to work with Blogger.com
Step 1 - Get the code:
Download the source from here.

Step 2 - Change the JavaScript:
src/shCore.js
On line 99:
I found these flags, which I turned on.
/** Blogger mode flag. */

bloggerMode : true,

stripBrs : true, 

And after line 1198 I added the following line of code
code.replace(//gi,'\n')

Step 3 - Host the script:
Find somewhere to host the SyntaxHighlighter code on the net.

Step 4 -
Setup
:
Follow the guide to setup.
When adding the link ans script references you need to change the HTML of the template. As the last part of the <head> section add the following
<script src='http://YOURHOST/src/shCore.js' type='text/javascript'/>
<script src='http://YOURHOST/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://YOURHOST/scripts/shBrushXml.js' type='text/javascript'/>
<link href='http://YOURHOST/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://YOURHOST/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
SyntaxHighlighter.config.clipboardSwf = 'http://YOURHOST/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

As you ca see I have added the cSharp and Xml brush, but you can change that to your own needs.

Step 5 - Embed code in your posts.
Now you can embed code snippets into you posts using the script tag:
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
]]></script>

Comments