MTにSyntaxHighlighterを導入する1


※2009年9月9日、IE7で確認したところ、ソースコードの領域が2つ出現するバグが発生していましたので、急遽SyntaxHighlighterを解除しました。
また手すきの時にでも調整します。

※2009年9月10日に調整しました。
その後の調整の話を書きました。

ブログを書き始めると、ソースコードとかを書くことも多くなるかなと思い、自動でソースの色分けしてくれるプラグインか何かがないかなーと探してたら、ありました。

SyntaxHighlighterというJavascriptを用いたものです。
Perlとか使ってないので、導入もしやすいです。
対応している言語は
@C++
@C#
@CSS
@Delphi
@Java
@Java Script
@PHP
@Python
@Ruby
@Sql
@VB
@XML/HTML
のようで、十分なカバー量です。

参考:ソースコードを綺麗に表示するJS「dp.SyntaxHighlighter」 – Caraldo.net


ダウンロードして解凍したら、
・css
・Scripts
・Uncompressed

のフォルダができます。
CSSはそのまま読み込ませるか、自分のベースに使っているCSSに追記するカタチでも。
あと使うのは、Scriptsに入っているJSファイル群です。
言語別に分かれているので、必要な分だけアップします。
shCore.jsは必須です。


アップしたら、ヘッダーに記述。
私はMovableTypeのヘッダーテンプレートに

<script type="text/javascript" src="<$mt:BlogURL$>common/js/shCore.js"></script>
<script type="text/javascript" src="<$mt:BlogURL$>common/js/shBrushJScript.js"></script>
<script type="text/javascript" src="<$mt:BlogURL$>common/js/shBrushPhp.js"></script>
<script type="text/javascript" src="<$mt:BlogURL$>common/js/shBrushCss.js"></script>
<script type="text/javascript" src="<$mt:BlogURL$>common/js/shBrushSql.js"></script>
<script type="text/javascript" src="<$mt:BlogURL$>common/js/shBrushXml.js"></script>

という風に追記。
また、

<script type="text/javascript">
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = 'js/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

とヘッダーに記述してwindow.onLoadイベントで呼び出してあげる必要があるのです。
が、例えばbodyにonLoadイベントがあると、それと干渉してしまいます。
MTの仕様なのか、私のお借りしたテンプレートがそうなのかわからないのですが、bodyにonLoadイベントがあったので、はじめはうまく動いていなかったです。
なので、↑のコードを

<script type="text/javascript">
function SyntaxHighlighter() {
dp.SyntaxHighlighter.ClipboardSwf = 'js/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

こんな感じに少し変えて、他のbodyにあったonLoadイベントの後に

<body onload="hogehoge();SyntaxHighlighter();">
という風に記述すると動くようになります。
あとは変換したいところを
<pre name="code" class="xml">
</pre>

でくくってあげると完了です。

class名は、そのソースコードを色分けする言語名です。
http://code.google.com/p/syntaxhighlighter/wiki/Languages
ここのAliasesの欄を参考に、クラス名に必要なクラスを指定してあげてください。

コメントを残す