Bloggerで「SyntaxHighlighter」を利用する

（注：この記事は古い「SyntaxHighlighter 1.5.x」を使用したものです。「SyntaxHighlighter 2.0」が2009年2月3日にリリースされており、新しいバージョンを利用する方法の記事はこちらにあります。）

Bloggerに限らず、Webページ上で様々なプログラミング言語のコードを載せる機会はあると思います。掲載したコードを色付けして見やすくするためには、いくつかの方法があると思いますが、今回は「SyntaxHighlighter」というjavascriptを利用することで実現します。
このブログはBloggerで運用していますので、Bloggerで「SyntaxHighlighter」を利用する方法を紹介します。
「Adding Syntax Highlighting to Blogger」を参考にしました。

1. http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.cssにアクセスし、全てをコピーする
2. Bloggerの「HTML編集」で <b:skin><!--[CDATA[/* と ]]--></b:skin> の間に貼り付ける
3. </head> タグの前に以下を貼り付ける

   <!-- Add-in CSS for syntax highlighting -->
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

4. </body> タグの前に以下を貼り付ける

   
   <!-- Add-in Script for syntax highlighting -->
   <script language='javascript'>
   dp.SyntaxHighlighter.BloggerMode();
   dp.SyntaxHighlighter.HighlightAll('code');
   </script>

5. ソースコードを含むブログエントリーのときに、「HTML の編集」タブを選択し、HTMLエスケープされたソースコードを以下のコードの間に入力する

   <pre name="code" class="cpp">
   ...あなたのHTMLエスケープされたコードここに貼り付ける...
   </pre>

   "cpp"の部分は、コードの言語にあわせて書き換えてください（cpp, c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, js, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, xslt）．（詳細はこちら
   ）