Blogger:SyntaxHighlighter(4)オートローダーで必要なブラシファイルのみロードする

前の関連記事：Blogger:SyntaxHighlighter(3)iOS Safariで行番号がずれる問題を解決

Syntaxhighlighterの本家のサイトをみているとautoloaderの機能の紹介がありました。30個近くまで増えたブラシファイルを全てロードすると時間がかかりますが、これを必要なブラシファイルのみ自動的にロードする機能です。

 SyntaxHighlighter.autoloader()は投稿本文の後に置く必要がある

SyntaxHighlighter - Dynamic Brush Loadingに本家の解説と使用例まで載っています。

これを機会に自分のGoogleサイトにSyntaxHighlighterのファイルを置くことにしました。

まずSyntaxHighlighter - Downloadからsyntaxhighlighter_3.0.83.zipファイルをダウンロードします。

解凍してできたフォルダの中のsyntaxhighlighter_3.0.83フォルダの中のscriptsフォルダとstylesフォルダをGoogleサイトにアップします。（やり方はBlogger:外部ファイル置き場をGoogleドライブからGoogleサイトへ変更を参照）

あとはSyntaxHighlighter - Dynamic Brush Loadingの使用例のファイルのURLの部分を自分のGoogleサイトのURLに書き換えます。

<link href='shCore.cssのURL' rel='stylesheet' type='text/css'/>
<link href='shThemeDefault.cssのURL' rel='stylesheet' type='text/css'/>
<script src='shCore.jsのURL' type="text/javascript"></script>
<script src='shAutoloader.jsのURL' type="text/javascript"></script>

まずはこれらをテンプレートHTMLの</head>の上行に入力します。

それで実際にautoloadする部分ですがこれの置き場所が非常に重要でした。

「SyntaxHighlighter.autoloader()」関数を使用しており、これは言語用定義ファイルを必要なものだけ動的に読み込む新機能ですが、これは当然、実行の時点で「どの言語用のファイルが必要か」が明らかになっている必要があります。
SyntaxHighlighter 3.0 にアップデート - 電脳スピーチ blog

「当然」のことらしいですがこれがわかるまでかなり四苦八苦しました。

本家のサイトにも書いていないですし、この電脳太郎さんの記事を見つけなかったらもう断念しようかと思っていました。

ということで以下の部分は</body>の上行に挿入して完成です。

<script type='text/javascript'>
  function path(){
    var args = arguments,
      result = [];
    for(var i = 0; i &lt; args.length; i++)
      result.push(args[i].replace('@', 'GoogleサイトにアップしたブラシファイルのページのURL/'));
    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.defaults['toolbar'] = false;
 SyntaxHighlighter.all();
</script>

5行目の「<」はテンプレートに入力するとエラーがでて保存できませんので「&lt;」に置き換えています。

ちょっとは表示が速くなったでしょうか？

GoogleサイトにSyntaxHighlighterのファイルをうつしたせいかプレビュー画面でもSyntaxHighlighterが適用されるようになりました。これは編集するには大きなメリットです。ただし、プレビュー画面ではスクロールはできません。

(2013.8.29追記）
xmlとcss、jsしか使わないのでオートローダーの使用はやめました。
3つだけならオートローダーを使わないほうが速いです。

(2013.9.1追記）
ところがやっぱり使用することへ。理由はSyntaxHighlighterにfleXcroll(4)IEだけ$(window).loadのタイミングが違うらしいへどうぞ。

参考にしたサイト

SyntaxHighlighter - Dynamic Brush Loading
本家の解説

SyntaxHighlighter 3.0 にアップデート - 電脳スピーチ blog
SyntaxHighlighter.autoloader()を置く場所がポイントであることを教えていただきました。

次の関連記事:Blogger:SyntaxHighlighter(5)Configurationを設定する