Insert Code Snippet in Blogger (Using SyntaxHighlighter)

I always find my self revisiting the topic of "inserting code snippet" whenever I change my template - because I forget to backup my blog template. And very unfortunate, blogger draft hasn't include a good code snippet system for users, yet.

So I decided to note down the codes for setting up SyntaxHighlighter (by Alexgorbatchev) in blogger.

To use syntaxhighlighter,

1. Copy and paste the following code just before </body> tag.

<!-- START OF SyntaxHighlighter -->
<!-- FIRST we add CSS -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreDefault.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

<!-- SECOND we add JS -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/>

<!-- THIRD we add brushes -->
<script type='text/javascript'>
//<![CDATA[
function path()
{
  var args = arguments,
      result = []
      ;
       
  for(var i = 0; i < args.length; i++)
      result.push(args[i].replace('@', 'http://alexgorbatchev.com/pub/sh/current/scripts/'));
       
  return result
};
 
SyntaxHighlighter.autoloader.apply(null, path(
  'applescript            @shBrushAppleScript.js',
  'actionscript3 as3      @shBrushAS3.js',
  'bash shell             @shBrushBash.js',
  'coldfusion cf          @shBrushColdFusion.js',
  'cpp c                  @shBrushCpp.js',
  'c# c-sharp csharp      @shBrushCSharp.js',
  'css                    @shBrushCss.js',
  'delphi pascal          @shBrushDelphi.js',
  'diff patch pas         @shBrushDiff.js',
  'erl erlang             @shBrushErlang.js',
  'groovy                 @shBrushGroovy.js',
  'java                   @shBrushJava.js',
  'jfx javafx             @shBrushJavaFX.js',
  'js jscript javascript  @shBrushJScript.js',
  'perl pl                @shBrushPerl.js',
  'php                    @shBrushPhp.js',
  'text plain             @shBrushPlain.js',
  'py python              @shBrushPython.js',
  'ruby rails ror rb      @shBrushRuby.js',
  'sass scss              @shBrushSass.js',
  'scala                  @shBrushScala.js',
  'sql                    @shBrushSql.js',
  'vb vbnet               @shBrushVb.js',
  'xml xhtml xslt html    @shBrushXml.js'
));
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
//]]>
</script>

<!-- END OF SyntaxHighlighter -->

For more info about Syntaxhighlighter, go to http://alexgorbatchev.com/SyntaxHighlighter/

2. Enclose the codes that you want with <pre> tag, see the following example.

<pre class="brush: html">
  (your codes goes here)
</pre>

Note: You have to replace "<" with "&lt;", or else blogger will still parse the "< >" tags. To do this, in "Post Options" (just below your post section) -> "Compose Settings", check "Show HTML literally". Then paste your code in "Compose" mode, instead of "Edit HTML" mode. The "<" codes will be automatically converted to "&lt;"

Thats all :)