Thursday, July 23, 2009

Configure blogger to use code highlight syntax

Despite the fact that Blogger doesn't support code coloring, you can do it putting javascript in your pages.

Modify your blog's template in order to use an external javascript library which parses the html document and does the work.

This is the configuration needed for using syntaxhighlighter.
Replace 'HOST' by 'http://syntaxhighlighter.googlecode.com/svn/trunk' to use the last version, or deploy these files in your own website.


<link href='HOST/Styles/SyntaxHighlighter.css'
rel='stylesheet' type='text/css'/>
<script src='HOST/Scripts/shCore.js' type='text/javascript'/>
<script src='HOST/Scripts/shBrushCss.js' type='text/javascript'/>
<script src='HOST/Scripts/shBrushJava.js' type='text/javascript'/>
<script src='HOST/Scripts/shBrushJScript.js' type='text/javascript'/>
<script src='HOST/Scripts/shBrushXml.js' type='text/javascript'/>
<script src='HOST/Scripts/shBrushPhp.js' type='text/javascript'/>
<script src='HOST/Scripts/shBrushRuby.js' type='text/javascript'/>
<script src='HOST/Scripts/shBrushCpp.js' type='text/javascript'/>
<script class='javascript'>
dp.SyntaxHighlighter.ClipboardSwf = "HOST/Scripts/clipboard.swf";
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll("code");
</script>


Then, wrap your code using <pre> tags with the appropriate name and class attributes set, and take care replacing all '<' by '&lt;' and '>' by '&gt;'



<pre name="code" class="html">
[...]
</pre>

<pre name="code" class="javascript">
[...]
</pre>


Now a trick: if you don't want to lose these changes when you change your base template, add a HTML/Javascript widget without any description to your footer, and put there the javascript code.