Using syntax version of SyntaxHighlighter with Blogger

The latest version 2.1.364 of the amazing SyntaxHighlighter from Alex Gorbatchev needs a bit of TLC to get working on Blogger:

Below is what I have right before the </head> tag in the Edit HTML tab of my Blogger layout.

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushScala.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' id='shTheme' rel='stylesheet' type='text/css'/>
<style type='text/css'>
.syntaxhighlighter .line {
font-size: 76% !important;
}
</style>
<script type='text/javascript'>
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.defaults['font-size'] = '50%';
</script>

Thats all you need to make it work.

The ugly section

<style type='text/css'>
.syntaxhighlighter .line {
font-size: 76% !important;
}
</style>

works around a bug in this version of SyntaxHighlighter described here. This allows SyntaxHighlighter.defaults['font-size'] = '50%'; to actually have an effect. If you don't do this, for some reason the code is shown at a ridiculously large size.

So now I can type exactly what you see here into Blogger's Compose editor

<pre class="brush: scala">
   def factorialInt(i: Int): Int = {
     def fact(i: Int)(accumulator: Int): Int = i match {
       case 1 => accumulator
       case _ => fact(i - 1)(i * accumulator)
     }
     fact(i)(1)
   }  
</pre>

which then appears as follows

   def factorialInt(i: Int): Int = {
     def fact(i: Int)(accumulator: Int): Int = i match {
       case 1 => accumulator
       case _ => fact(i - 1)(i * accumulator)
     }
     fact(i)(1)
   }  

There is a newer syntax as of 2.1.364 which uses CDATA section for your code which allows you to put special charcters such as < and > characters directly in the code without them being encoded as &lt; or &gt; which is possibly useful for Scala. Although blogger does this for you (automatic encoding of special characters) so its not too important for blogger posts.

So if you type exactly what you see here into Blogger's Compose editor (but the "pre" syntax above is simpler when using blogger

then you get this