このブログはコード表示にSyntaxHighlighterを利用しているのですが、バージョンが1.5と古いのでそろそろ刷新しようと思い、最新版？の3.0.83を設定して動作を確認しようとしたのですが、サンプルを元に設定したものの全く動着ませんでした。

chromeでデバッグツールで確認したところ記のエラーメッセージが表示されて動作していませんでした。

Uncaught ReferenceError: XRegExp is not defined
Uncaught TypeError: Cannot set property 'autoloader' of undefined
Uncaught TypeError: Cannot read property 'Highlighter' of null

SyntaxHighlighterを動かすにはどうやら「XregExp」が必要のようです。これは環境によって異なるのでしょうかねぇ...。 XRegExpのサイトからダウンロードして下記のように設定したところ無事動作しました。以前は全て書いていましたが、今はまとめて呼び出せるんですね。

<script src="/js/libs/syntaxhighlighter/xregexp-min.js"></script>
<script src="/js/libs/syntaxhighlighter/shCore.js"></script>
<script src="/js/libs/syntaxhighlighter/shAutoloader.js"></script>
<script src="/js/libs/syntaxhighlighter/shBrushXml.js"></script>
<script>
SyntaxHighlighter.autoloader(
"bash shell                /js/libs/syntaxhighlighter/shBrushBash.js"
,"css                      /js/libs/syntaxhighlighter/shBrushCss.js"
,"sass                     /js/libs/syntaxhighlighter/shBrushSass.js"
,"php                      /js/libs/syntaxhighlighter/shBrushPhp.js"
,"html xml xhtml           /js/libs/syntaxhighlighter/shBrushXml.js"
,"js jscript javascript    /js/libs/syntaxhighlighter/shBrushJScript.js"
,"perl pl                  /js/libs/syntaxhighlighter/shBrushPerl.js"
,"plain                    /js/libs/syntaxhighlighter/shBrushPlain.js"
,"sql                      /js/libs/syntaxhighlighter/shBrushSql.js"
,"yaml yml                 /js/libs/syntaxhighlighter/shBrushYAML.js"
);
SyntaxHighlighter.all();
</script>

ただpre要素に設定する必要があって、これまでの記事はすべてこの個所がtextareaなので、全雉変更しないといけないのでどうしようかなぁと悩んでいます。