Using SyntaxHighlighter at Blogspot

Blogspot doesn't support syntax highlight by default. What a shame, considering that all decent Wiki engine are providing certain level of support for this already. While Blogspot isn't a wiki, but without syntax highlighting, I just keep have a feel that, Blogspot is not a place for technical post. Anyway, SyntaxHighlighter is a solution for this.

The official installation instruction require you to upload the script and link the scripts from your blogspot template. Castillo has post a workaround on how to use this lovely tools on Blogspot without having a hosting space. The post seems out-dated. It isn't too hard to figure out the way, below are the up-to-date procedure.

1. Update the Blogspot template and add following in the <head>

  <script language='javascript'   
    src='http://bitbucket.org/alexg/syntaxhighlighter/raw/b7578b438a69/scripts/XRegExp.js'/>
  <script language='javascript' 
    src='http://bitbucket.org/alexg/syntaxhighlighter/raw/b7578b438a69/scripts/shCore.js'/>
  <script language='javascript' 
    src='http://bitbucket.org/alexg/syntaxhighlighter/raw/b7578b438a69/scripts/shAutoloader.js'/>

  <link rel='stylesheet' type='text/css'
    href='http://bitbucket.org/alexg/syntaxhighlighter/raw/b7578b438a69/styles/shCoreDefault.css' />

2. Apply the following snipplets near the end of <body>

<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.autoloader(
  'xml  http://bitbucket.org/alexg/syntaxhighlighter/raw/b7578b438a69/scripts/shBrushXml.js',
  'css  http://bitbucket.org/alexg/syntaxhighlighter/raw/b7578b438a69/scripts/shBrushCss.js'
);
SyntaxHighlighter.all();
</script>

3. In the post, use <pre> with the class attribute to define the corresponding syntax

<pre class="brush: xml>
  <echo>Hi SyntaxHighlighter!</echo>
</pre>

SyntaxHighlighter support different kind of syntax, all you need to do is just to define it in the "autoloader" call. The full list of supported syntax can be found here. SyntaxHighlighter also provided a few different theme which can be configure by importing different javascript, the full list can be found in here.

Zarick's Blog | Incipio

05 December, 2010

Using SyntaxHighlighter at Blogspot

No comments: