MTにSyntaxHighlighterを導入する1

Date 2009年09月06日

※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の欄を参考に、クラス名に必要なクラスを指定してあげてください。

Tag Movable Type

コメントを残すコメントをキャンセル

古い記事へ新しい記事へ

ページトップ

MTにSyntaxHighlighterを導入する1

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル