syntaxhighlighterを入れてみるの巻

ブログに記述したコードを自分で後でみても良く分からないぐらい汚いのでsyntaxhighlighterを導入することにしてみます。
1.まずsyntaxhighlighter – Google Codeからダウンロード
2.解凍して出来上がった”dp.SyntaxHighlighter”をサーバにアップ。（ｵﾃﾞの場合はブログでサブドメインになっているので、そのサブドメインのﾄﾞｷｭﾒﾝﾄﾙｰﾄにｱｯﾌﾟ）
3.syntaxhighlighterのCSSを追加する。Movable Typeだとメインページ以外にもアーカイブ系にも追加。

<link rel="stylesheet" href="<$MTBlogURL<pre wp-pre-tag-0></pre>gt;dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css" type="text/css" />

以下他にも色々追加しないといけないので、Movable typeだとモジュールで追加した方が楽かな？ということで以下モジュールベースで話を展開。
4.”module.SyntaxHighlighter.txt”というテキストファイルを新規作成。
5.CSS設定の追加。”module.SyntaxHighlighter.txt”に以下の一文を記述。

<link rel="stylesheet" href="<$MTBlogURL<pre wp-pre-tag-1></pre>gt;dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css" type="text/css" />

6.使用言語のshBrushスクリプト(パーサー？)を”module.SyntaxHighlighter.txt”に追記。
種類は

1. shBrushCpp.js :C++
2. shBrushCSharp.js : C#
3. shBrushCss.js : CSS
4. shBrushDelphi.js : Delphi
5. shBrushJava.js : Java
6. shBrushJScript.js : JavaScript
7. shBrushPhp.js : PHP
8. shBrushPython.js : Python
9. shBrushRuby.js : Ruby
10. shBrushSql.js : SQL
11. shBrushVb.js : Visual Basic
12. shBrushXml.js : XML
13. shCore.js : COREこれは必須っぽい

といったところ。自分が使用するであろう言語だけ追記。XMLだけ使う場合はこんな感じ。

<script type="text/javascript" src="<$MTBlogURL<pre wp-pre-tag-2></pre>gt;dp.SyntaxHighlighter/Scripts/shCore.js"></script>
<script type="text/javascript" src="<$MTBlogURL<pre wp-pre-tag-2></pre>gt;dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>

7.クリップボードコピーの定義。Flashを介在してクリップボードにｺｰﾄﾞをコピーしているらしい。そのファイルは”/Scripts/clipboard.swf”。組み込みは

<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '<$MTBlogURL$>/flash/dp.SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

8.標準ではAction Script用のBrushは存在しないですが、dp.SyntaxHighlighterでActionScript 2.0/3.0のコードをハイライトする at Flaboで配布されていたので入れてみる。（ただ今停止中って書いてあるので動くのか不明ですが）DLして解凍したデータを”dp.SyntaxHighlighter”にマージして”module.SyntaxHighlighter.txt”に追記。最終的な”module.SyntaxHighlighter.txt”はこんな感じ。

<link rel="stylesheet" href="<$MTBlogURL<pre wp-pre-tag-4></pre>gt;dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css" type="text/css" />
<script type="text/javascript" src="<$MTBlogURL<pre wp-pre-tag-4></pre>gt;dp.SyntaxHighlighter/Scripts/shCore.js"></script>
<script type="text/javascript" src="<$MTBlogURL<pre wp-pre-tag-4></pre>gt;dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script type="text/javascript" src="<$MTBlogURL<pre wp-pre-tag-4></pre>gt;dp.SyntaxHighlighter/Scripts/shBrushCss.js"></script>
<script type="text/javascript" src="<$MTBlogURL<pre wp-pre-tag-4></pre>gt;dp.SyntaxHighlighter/Scripts/shBrushJava.js"></script>
<script type="text/javascript" src="<$MTBlogURL<pre wp-pre-tag-4></pre>gt;dp.SyntaxHighlighter/Scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="<$MTBlogURL<pre wp-pre-tag-4></pre>gt;dp.SyntaxHighlighter/Scripts/shBrushActionScript2.js"></script>
<script type="text/javascript" src="<$MTBlogURL<pre wp-pre-tag-4></pre>gt;dp.SyntaxHighlighter/Scripts/shBrushActionScript3.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '<$MTBlogURL<pre wp-pre-tag-4></pre>gt;/flash/dp.SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

9.”module.SyntaxHighlighter.txt”をサーバにアップ。
Movable Typeのモジュールを新規作成。名前を”SyntaxHighlighter”に設定して”このテンプレートにリンクするファイル”にアップした”module.SyntaxHighlighter.txt”のパスを指定して保存。これでモジュールは完成。
10.次にメインページ、アーカイブ各種にモジュールを追記。

<$MTInclude module="SyntaxHighlighter"<pre wp-pre-tag-5></pre>gt;

11.記述したいコードをtextareaタグで囲み、そのclass名で言語名を指定。
言語名のエイリアスはLanguages – syntaxhighlighter – Google Code – List of supported languages.参照。

<?xml version="1.0" encoding="utf-8" ?>
<data>
<foods>
<item id="curry" price="800"><![CDATA[カレーライス]]></item>
<item id="pasta" price="700"><![CDATA[パスタ]]></item>
</foods>
<drinks>
<item id="beer" price="500"><![CDATA[ビール]]></item>
<item id="tea" price="500"><![CDATA[お茶]]></item>
</drinks>
</data>

どうだろう？上手くいっているのか？
駄目だ～～～汗
全然上手くいかない理由が分かった。
Usage – syntaxhighlighter – Google Code – How to use SyntaxHighlighter.
の

For optimal result, place this code at the very end of your page. Check HighlightAll for more details about the function.

この一文でした。
つまりheadに入れちゃあ駄目なんですね。うん、どこで発動するんだろう？って疑問はあったんだ・・ｗ
ということで

<$MTInclude module="SyntaxHighlighter"<pre wp-pre-tag-7></pre>gt;

をbodyがCloseした後に入れれば大丈夫。
ちなみにMovabley Typeの改行設定で「改行を変換する」に設定していると、コードの中にも改行タグ<br />が入ってしまうのですが、この回避方はpreタグ内の改行（brタグ）を無効にする（MT・Movable Type） – ウェブライフハックを参照。<pre>を使用することで回避できるようです。
追記：2008/11/21 16:43
AS3用のBrushをdigitalflipbook: AS3 Syntax Highlighting (with SyntaxHighlighter)に入れ替えてみました。早くなるかな？
ためしに一つ・・・

/**********************************************************/
/*** Generated using Asapire [brainy 2008-Mar-07 11:06] ***/
/**********************************************************/
package flash.net {
public final  class URLRequest {
/**
* The MIME content type of the content in the the data property.
*/
public function get contentType():String;
public function set contentType(value:String):void;
/**
* An object containing data to be transmitted with the URL request.
*/
public function get data():Object;
public function set data(value:Object):void;
/**
* A string that uniquely identifies the signed Adobe platform component to be stored
*  to (or retrieved from) the Flash Player cache. A digest
*  corresponds to a single cached file; if you change the file in any way, its digest
*  will change in an unpredictable way. By using a digest, you can verify the cached file across
*  multiple domains. Two files with the same digest are the same file, and two files with different
*  digests are not the same file. A file cannot (practically) be created to "spoof" a digest and
*  pretend to be another digest.This property applies to
*  SWF content only; it does not apply to JavaScript code running in AIR.
*/
public function get digest():String;
public function set digest(value:String):void;
/**
* Controls the HTTP form submission method.
*/
public function get method():String;
public function set method(value:String):void;
/**
* The array of HTTP request headers to be appended to the
*  HTTP request. The array is composed of URLRequestHeader objects.
*/
public function get requestHeaders():Array;
public function set requestHeaders(value:Array):void;
/**
* The URL to be requested.
*/
public function get url():String;
public function set url(value:String):void;
/**
* Creates a URLRequest object.
*  If System.useCodePage is true, the request is encoded using the
*  system code page, rather than Unicode.
*  If System.useCodePage is false, the request is encoded using Unicode, rather than the
*  system code page.
*
* @param url               <String (default = null)> The URL to be requested. You can set the URL later by using the url property.
*/
public function URLRequest(url:String = null);
}
}

どうだろう？
お、結構早いかも。