Adding SyntaxHighlighter to your Blog

First add the CSS to your template using the Template Designer. Copy and paste this CSS snippet to "Advanced -> Add CSS"

<style> 
.syntaxhighlighter .toolbar 
{
  top: -33px !important;
}
code {
  background-color: #FFFFCC;
  font-family: Consolas,Monaco,"Bitstream Vera Sans Mono","Courier New",Courier,monospace;
}
</style>

Next, you will need to add some additional CSS and scripts by editing the template html. I put mine in the head just after the title.

<link href='http://alexgorbatchev.com/pub/sh/2.0.296/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.0.296/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushGroovy.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushBash.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script type='text/javascript'> 
  SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.296/scripts/clipboard.swf';
  SyntaxHighlighter.config.bloggerMode = true; 
  SyntaxHighlighter.defaults['auto-links'] = false;
  SyntaxHighlighter.all();
</script> 

Then use the "pre" block with appropriate "brush" class to create your code block. For example:

<pre class="brush:xml">
  <style> 
  .syntaxhighlighter .toolbar 
  {
    top: -33px !important;
  }
  code {
    background-color: #FFFFCC;
    font-family: Consolas,Monaco,"Bitstream Vera Sans Mono","Courier New",Courier,monospace;
  }
  </style>
</pre>