SyntaxHighlighter ( with Autoloader ) 導入記

ドリーです。
このブログにSyntaxHighlighterを入れました。
JavaScriptをつかってコードの色づけをしてくれる良さげな奴です。
公式ページはこちら。
http://alexgorbatchev.com/SyntaxHighlighter/

いやーなかなか苦労しました。なのでやり方をメモしておきます。
まず基本的に読み込むべきは

• shCore.css
• look and feel用CSS
• shCore.js
• 各言語用.jsファイル

です。

それぞれのファイルは公式からダウンロードして手元に置くのが本来の使い方ですが、
公式でもホストされています。
http://alexgorbatchev.com/SyntaxHighlighter/hosting.html
今回は公式から引っ張ってくることにしました。
look and feel用CSSはEmacs風なshThemeEmacs.cssを使うことにしました。
また、各言語用jsファイルをすべて読み込んでしまってもよいのですが
(http://www.cyberack.com/2007/07/adding-syntax-highlighter-to-blogger.html が参考になります)、
毎回すべてのjsファイル読み込むのは無駄ですし、公式ホスティングサービスにも負担がかかります。
そこで、必要となるjsファイルを動的に読み込むAutoloaderもあわせて使用することにしました。
Autoloaderのjsファイルも公式でホストされているのでそれも読み込みます。
というわけで、管理画面の デザイン > HTMLを編集 から、
テンプレートのなかの</head>の直前に以下のコードを入れました。

<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/shThemeEmacs.css' rel='stylesheet' type='text/css'/>
<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'/>

で、これを入れたからってまだすぐには動きません。
Autoloaderとハイライトを発動させるためのJavaScriptを埋め込む必要があります。
そのために公式ページのこちらをパクリました。
http://alexgorbatchev.com/SyntaxHighlighter/manual/api/autoloader.html
管理画面の デザイン > ページ要素 より、
以下のコードを"HTML/JavaScript"のガジェットして右に配置しました。

<script type="text/javascript"><!--
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>

上のコードはテンプレートに埋め込んでもよかったんですが、
なんかBloggerが勝手にクォーテーションとかエスケープしやがるんで断念しました。
ここで注意なのですが、これらのコード（というかAutoloaderの起動部分）は
HTML上でブログ記事（=色付けしたいところ）より後ろに配置されないといけません。
なぜならそうしないと、Autoloaderが何を動的に呼び出すべきか、の解析ができないからです。

おまけ。上のコードにある

SyntaxHighlighter.autoloader.apply(null,...

のallpyってなんだっけ？
・・・と思って調べました。いつか書きます。