ホーム >> 左脳Script >> Movable Type >> Plugin開発 >> コード表示用 Plugin 改 ~文字装飾の憂鬱~

コード表示用 Plugin 改 ~文字装飾の憂鬱~


マークアップ記述を含む、全てのコードを表示できるようにする事を目標に、mtpretag は、進化を続けている、かもしれません。今回は、前回より、単語の装飾部分に難があったと感じ、更に(主に自分が)使いやすく改良してみました。

問題点

前回は、装飾済みかどうかに関わらず「一致した単語を装飾する」という処理をしていた為、以下のような状況になる事がありました。


foreach my $it (@array)
{
    print   $it."\n";
}

<mt:PreTagAttr>内に、

  • <mt:PreTagWord word="for" style="color:blue;">
  • <mt:PreTagWord word="foreach" style="color:red;">

と、それぞれの単語の装飾の記述をしたにも拘らず、一致した端から装飾をしてしまいます。
また、単語の装飾情報をハッシュで管理していた為、<mt:PreTagWord>の指定順を保障できない状態で、この部分の根本的な作り直しが必要でした。


今回の改良で、上記の問題を克服しました。




使用法

<mt:PreTagWord>による指定項目が増えました。

  • word
    特に前回から変化はありません。正規表現での指定が可能です。

  • pre
    新項目。
    wordで指定する直前の文字(文字列)を正規表現で指定できます。 この部分は、装飾の対象外になります。

  • pst
    新項目。
    wordで指定する直後の文字(文字列)を正規表現で指定できます。 この部分は、装飾の対象外になります。

  • class
    特に前回から変化はありません。cssクラスを指定できます。

  • style
    特に前回から変化はありません。cssスタイルを指定できます。

HTMLソースを見ると判りますが、単語を<span>タグで括る事で装飾を実現しています。

この他の仕様は、殆ど変化がありません。手抜きで申し訳ありませんが、前回記事を参照してください。


以下表示サンプル。

package 
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.text.TextField;

    /**
     * ...
     * @author 
     */
    public class Main extends Sprite 
    {
        public function Main():void 
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }

        private function init(e:Event = null):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            // entry point
            var tf:TextField    =   new TextField();
            tf.width    =   200;
            tf.text =   "セクスィー部長ファンクラブ";
            addChild(tf);
            var tfs:TextField   =   new TextField();
            tfs.width   =   200;
            tfs.y   =   25;
            tfs.selectable  =   false;
            tfs.text    =   "あなたとは違うんです!";
            addChild(tfs);
        }
    }
}

装飾表記は以下。

<mt:Ignore>複数行コメントアウト</mt:Ignore>
<mtpretagword word="/\*[\s\S]*?\*/" style="color:green;">

<mt:Ignore>単一行コメントアウト</mt:Ignore>
<mtpretagword word="//.*" style="color:green;">

<mt:Ignore>文字列リテラル</mt:Ignore>
<mtpretagword word='"[\s\S]*?"' style="color:#800000;">
<mtpretagword word="'[\s\S]*?'" style="color:#800000;">
上記のような、「長さが不定のもの」「複数行に跨るもの」も、正規表現により指定が可能です。


<mt:Ignore>数字リテラル</mt:Ignore>
<mtpretagword pre="\D" word="\d+" style="color:#000080;">
数字表記の指定。preで「指定したい部分の前の文字列」を指定できるので、基本的にどんな箇所や条件でも指定が出来ます。


<mt:Ignore>ステートメント1</mt:Ignore>
<mtpretagword word="package|public|private|protected" style="color:blue;">

<mt:Ignore>ステートメント2</mt:Ignore>
<mtpretagword word="class|function" style="color:#000080;">
正規表現での単語指定なので、同じ装飾の場合は表記を纏める事が出来ます。


<mt:Ignore>その他ユーザー任意指定</mt:Ignore>
<mtpretagword word="Event\.ADDED_TO_STAGE" style="color:red;font-weight:bold;">
<mtpretagword pre="\W" word="Event" pst="\W" style="color:#00ff00;font-weight:bold;">
上記サンプルコードの例では、「<mtpretagword word="Event" style="color:#00ff00;font-weight:bold;">」と指定すると、文中の「removeEventListener」「addEventListener」の中にある「Event」が装飾されてしまいます。

そこで、preに直前の文字として、「英数文字以外」の「\W」(Wは大文字)を指定し、同様にpstに直後の文字を指定することで、文中の物には一致しないよう指定する事が出来ます。




ダウンロード

pretag20090618.PNG
Download→PreTag20090618.zip

展開すると、ファイルが一つできます。Movable Type のプラグインディレクトリへ配置するだけです。




まとめ?!

このまま、各種コードの色づけなども実装しそうな勢いですが、それにはコードの正確なパースが必要になり、そんな機能をプラグインで実現した日には、ブログの再構築で地獄を見るのは確定的に明らか。

というわけで、「あくまで単純な単語の色づけ」までに留めることにしようと思います。




トラックバック(0)

トラックバックURL: http://n-yagi.0r2.net/sanoupulurun/mt-tb.cgi/168

コメントする

ホーム >> 左脳Script >> Movable Type >> Plugin開発 >> コード表示用 Plugin 改 ~文字装飾の憂鬱~

アーカイブ

このブログ記事について

このページは、n-yagiが2009年6月18日 19:28に書いたブログ記事です。

ひとつ前のブログ記事は「エレメントの座標取得 ~IEの破壊的遅さ~」です。

次のブログ記事は「エレメントの座標取得 ~高速化への挑戦~」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Creative Commons License
このブログはクリエイティブ・コモンズでライセンスされています。