SyntaxHighlighter 2.0をMovableType4.25で使ってみる

一応たまにプログラムを書いたりすることもあるので、MovableType上で格好良くソースが表示出来たらいいなと思って探してみた。
そしたらMovableType用というわけじゃないけれど、目的のものを発見。

Syntax Highlighter 2.0

これを、現状のMovableType4.25で動かすメモ書きを残しておく。

まずは上のサイトから、最新バージョン(今日時点では2.0.296)をダウンロード。
Zipを解凍すると

/script
/src
/styles
LGPLv3.txt
test.html

が展開される。
このままだとサーバにインストールするのが面倒くさいのでいらないファイルを削っていく。
(今回の場合は、サーバのルートにフォルダ SyntaxHighlighter を作って、そこにまとめてインストールすることにした。)

1. scriptフォルダを、SyntaxHighlighter にリネーム
2. stylesフォルダの中から、以下のファイルを SyntaxHighlighter フォルダへ移動
   1. *.pngファイル全部
   2. shCore.css
   3. shThemeDefault.css
3. SyntaxHighlighterフォルダ以外は必要ないので削除

とりあえず、これでインストールファイルの準備は完了。
サーバのルートに、SyntaxHighlighter フォルダをゴッソリコピーしちゃう。

次はMovableType側の設定。デフォルトテンプレートの場合しか説明しませんよ。

1. ダッシュボードからデザイン→テンプレートを選択
2. テンプレートモジュールから HTMLヘッダー を選択
3. 今あるヘッダーの最後に、以下の内容をコピペ(行番号はウチの環境なので気にしないで)

<!-- Include SyntaxHighlighter -->
<script type="text/javascript" src="/SyntaxHighlighter/shCore.js"></script>
<script type="text/javascript" src="/SyntaxHighlighter/shBrushBash.js"></script>
<script type="text/javascript" src="/SyntaxHighlighter/shBrushCpp.js"></script>
<script type="text/javascript" src="/SyntaxHighlighter/shBrushCSharp.js"></script>
<script type="text/javascript" src="/SyntaxHighlighter/shBrushCss.js"></script>
<script type="text/javascript" src="/SyntaxHighlighter/shBrushDelphi.js"></script>
<script type="text/javascript" src="/SyntaxHighlighter/shBrushDiff.js"></script>
<script type="text/javascript" src="/SyntaxHighlighter/shBrushGroovy.js"></script>
<script type="text/javascript" src="/SyntaxHighlighter/shBrushJava.js"></script>
<script type="text/javascript" src="/SyntaxHighlighter/shBrushJScript.js"></script>
<script type="text/javascript" src="/SyntaxHighlighter/shBrushPhp.js"></script>
<script type="text/javascript" src="/SyntaxHighlighter/shBrushPlain.js"></script>
<script type="text/javascript" src="/SyntaxHighlighter/shBrushPython.js"></script>
<script type="text/javascript" src="/SyntaxHighlighter/shBrushRuby.js"></script>
<script type="text/javascript" src="/SyntaxHighlighter/shBrushScala.js"></script>
<script type="text/javascript" src="/SyntaxHighlighter/shBrushSql.js"></script>
<script type="text/javascript" src="/SyntaxHighlighter/shBrushVb.js"></script>
<script type="text/javascript" src="/SyntaxHighlighter/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="/SyntaxHighlighter/shCore.css" />
<link type="text/css" rel="stylesheet" href="/SyntaxHighlighter/shThemeDefault.css" />
<script type="text/javascript">
	SyntaxHighlighter.config.clipboardSwf = '/SyntaxHighlighter/clipboard.swf';
	SyntaxHighlighter.config.strings.expandSource = 'ソースを展開';
	SyntaxHighlighter.config.strings.viewSource = 'プレーン表示';
	SyntaxHighlighter.config.strings.copyToClipboard = 'クリップボードへコピー';
	SyntaxHighlighter.config.strings.copyToClipboardConfirmation ='クリップボードへコピーしました';
	SyntaxHighlighter.config.strings.print = '印刷';
	SyntaxHighlighter.config.strings.help = 'help';
	SyntaxHighlighter.all();
</script>

4. 保存する
5. おしまい(*´−`)

あとはフォーマットに従って記事を書けば、ソースが綺麗に表示されるハズです。
例えば、こんな感じに記述します。

<pre class="brush: cpp;">
void main() {
	printf("Hello world!!");
}
</pre>

 そうすると、こうなります 

void main() {
	printf("Hello world!!");
}

brushのところに、言語を指定してやるわけですね。
対応してるのはこんな感じ。知らないのもありますが・・・・

 他にも、パラメータはあるんですが、説明が面倒なので本家サイトで確認してください。

MovableTypeのエディタにFCKEditorを使っている場合は、Code syntax highlight pulgin for FCKEditorをインストールするとボタン一つでソースを入力できるようになるのでオススメです。
(というか、この記事を書いている途中に存在に気付いてインストールして使いますた)

その場合、5.Use it にも書いてありますが、インストールが完了したらブラウザのキャッシュをクリアしないとプラグインが有効にならないので気をつけてください。

あー。インストール終わったけどプログラム公開するなんてこと、今後あるんだろうか・・・(ﾏﾃ 

※2009/05/04追記 Code syntax highlight pulgin for FCKEditorをもう少し便利にする もあわせてどうぞ。