2009-07-24

Syntax Highlighting in Blogger -- with jQuery & SyntaxHighlighter

There are a few reasons I decided to go with Blogger over other blogging options. 1) I want to spend time writing not setting things up, 2) BlogEngine.NET didn't seem to look right no matter what theme I used and I didn't like the admin and 3) Wordpress is all MySQL.

That being said I wanted to get SyntaxHighlighter working. After reading Guogang Hu's post about how to get it working (& not likely a lot of code), I decided to do it with jQuery. The real issue with SyntaxHighligher and Blogger is the line breaks. Posts have line breaks replaced by <br /> tags -- which SyntaxHighlighter will faithful display.

Using the replaceWith method in jQuery makes this a snap. Check out the code below.


<link href='/syntaxhighlighter/styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='/syntaxhighlighter/scripts/shCore.js' type='text/javascript'></script>
<script src='/syntaxhighlighter/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='/syntaxhighlighter/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='/syntaxhighlighter/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='/syntaxhighlighter/scripts/shBrushSql.js' type='text/javascript'></script>
<script type='text/javascript'>
$('pre br').replaceWith('\n');
dp.SyntaxHighlighter.HighlightAll("code");
</script>

No comments: