Movable Type 備忘録

テンプレート編集画面の CodePress をオフする

Nov242007
Author: bzbell
Categories: MovableType, Customize
Tags: 4.0, CodePress, Customize, MovableType

Next Page: jQuery でファイルアップロード( JqUploader )
Prev Page: Ajaxでアクセス・ランキングを表示する４

こんばんわ^^

先日の予告通り、テンプレート編集画面でページ表示時に整形する JavaScript をマスクして問題なかったのでご紹介します。

厳密には JavaScript のマスクはしてないのですが、Syntax Highlight 機能をマスクしただけです。

解析して初めて知ったのですが、Movable Type 4 のハイライタには CodePress が組み込まれてるようです。
CodePress とは、Syntax Highlight 機能が付いたウェブソースエディタです。多数の言語( PHP/JavaScript/Java/Perl/SQL/HTML/CSS )に対応しています。

使ったことはなかったけど、だいぶ前に youmos さんとこで紹介されてたので、名前だけは覚えてたから思ったより解析はスムーズにこなせました (;￣∇￣A ほっ

JavaScriptとPHPでWebソースエディタ（CodePress）

わたしは Movable Type のテンプレート編集画面で直接 CSS や (X)HTML を記述するようなことはないです。
そそっかしいので、バックアップも兼ねて、必ずテキストエディタで記述してからコピー & ペーストするようにしてます。それにテキストエディタには Highlight 機能がついてますしね (￣∇￣)b

ということで、高機能な CodePress による Syntax Highlight 機能をマスクする方法を説明します。

カスタマイズ

変更する前に必ずバックアップするようにしてくださいね。

Syntax Highlight 機能のマスクは、テンプレート編集画面用のテンプレートを修正することで行えます。
テンプレート編集画面のテンプレートは mt/tmpl/cms/edit_template.tmpl になります。
mt/tmpl/cms/edit_template.tmpl はテンプレート編集画面の本文にあたるテンプレートでして、その中からヘッダー部にあたる mt/tmpl/cms/include/header.tmpl とフッター部の mt/tmpl/cms/include/footer.tmpl がインクルードされてます。

CodePress の本体は mt/mt-static/codepress/ に格納されてます。
実際には mt/mt-static/mt.js 中の 2210 行目辺りに CodePress のクラスが定義されてますので、興味があったら見てみてください。

まず CodePress の機能をマスクします。
mt/tmpl/cms/edit_template.tmpl 中の 393 行目辺りにあるコードを以下のように変更します。
mt/tmpl/cms/edit_template.tmpl
1. <textarea tabindex="3" class="full-width monospace medium" spellcheck="false" name="text" id="text" cols="" rows="" mt:watch-change="1" style="height: <mt:var name="disp_prefs_height_text" default="290">px" mt:editor="codepressoff" mt:editor-options="lang:<mt:var name="template_lang"> autocomplete:off" /><mt:var name="text" escape="html"></textarea>
赤い字の部分のように、「codepress」から「codepressoff」と変更します。
次にハイライトの On/Off ボタンを非表示します。
mt/tmpl/cms/edit_template.tmpl 中の 379 行目辺りにある、以下のコードをコメントしてください。
mt/tmpl/cms/edit_template.tmpl
1. <mt:ignore>
2. <span class="codepress-toolbar" style="float:right">
3. <a href="javascript: void 0;" title="<__trans phrase="Syntax Highlight On" escape="singlequotes">" mt:command="set-mode-codepress-on" class="command-toggle-codepress-on toolbar button"><b>Syntax Hightlight On</b><s></s></a>
4. <a href="javascript: void 0;" title="<__trans phrase="Syntax Highlight Off" escape="singlequotes">" mt:command="set-mode-codepress-off" class="command-toggle-codepress-off toolbar button"><b>Syntax Hightlight Off</b><s></s></a>
5. </span>
6. </mt:ignore>
赤い字の部分で囲うことでコメントアウトすることができます。
一通り変更したら、元のディレクトリにアップロードしてください。そして、テンプレート編集画面を開いて、CodePress による Syntax Highlight 機能がマスクされたことを確認します。