MTPrecodeプラグイン

• Apr152007
• Vote:
  http://bizcaz.com/archives/2007/04/15-230046.php
• Categories: Customize, MovableType
• Tags: MovableType, MTPrecode, Plugins
• Social Bookmark

• Prev Page: カテゴリごとにテンプレートを切り替える
• Next Page: MovableType版 Updated Today

こんにちわ^^

今日は目の調子がいいので、がんばってプラグイン作ってみました (￣∇￣)/

先日、こちらのdp.SyntaxHighlighterで、各種コードを整形してくれるJavaScriptを紹介しました。
でも、わたしのところでは他のJavaScriptと競合!? しちゃうようで、あんまりよろしくないなぁ･･･と思って、コードを解析したら何となく作れそうだったので、似たようなものをプラグインとして作ってみたんです (●´∀｀●)

まずはサンプルですね。

上記はMTPrecodeプラグインのコードになります。
そのコードをMTPrecodeプラグインを使って整形したものです。

dp.SyntaxHighlighterと違って強調表示はされません。
でも、とりあえず目的の機能は満たしてると思います。

MTPrecodeプラグインの使い方

使い方はカンタンです。
整形したいテキストを<MTPrecode>コンテナタグで囲うだけです。
たとえば、以下のようなかんじで使います。

そうすると、以下のように整形されます。

あとは、上記で出力されるClassルールをCSSで各自の好みで変更するだけです (￣∇￣)b
ちなみに、例で示したスタイルは以下の通りです。

オプション

<MTPrecode>コンテナタグに以下のオプションを対応しました。

• start
  指定した行番号から採番できます。デフォルトは1番から採番されます。

  1. <MTPrecode start="400">
  2.     <div>
  3.         <ul>
  4.         <li>xxxxx</li>
  5.         </ul>
  6.     </div>
  7. </MTPrecode>

  青い字の部分で開始番号(=400)を指定しています。
  結果、以下のように表示されます。

  400.     <div>
  401.         <ul>
  402.         <li>xxxxx</li>
  403.         </ul>
  404.     </div>

  - 補足 -

  このオプションでは、<ol>タグにstartオプションをつけることで任意の番号を表示させてます。
  でも、W3Cではstartオプションは推奨されていません。何でだろぅね (´･д･`)

  CSSだけでカウンタの設定は可能なんです...可能だけど、IEが未対応なんです。

• title
  任意のタイトル名を付加することができます。日本語も表示可です。
  このオプションが指定されない限りタイトル表示はされません。

  1. <MTPrecode start="400" title="タイトル表示">
  2.     <div>
  3.         <ul>
  4.         <li>xxxxx</li>
  5.         </ul>
  6.     </div>
  7. </MTPrecode>

  青い字の部分でタイトル表示の指定をしています。
  結果、以下のように表示されます。

  タイトル表示

  400. <MTPrecode start="400" title="タイトル表示">
  401.     <div>
  402.         <ul>
  403.         <li>xxxxx</li>
  404.         </ul>
  405.     </div>
  406. </MTPrecode>

• overline
  任意の行数以上になった場合、縦スクロールバーを表示することができます。デフォルトは 30行となっています。

  1. <MTPrecode overline="30">
  2.     <div>
  3.         <ul>
  4.         <li>xxxxx</li>
  5.         </ul>
  6.     </div>
  7. </MTPrecode>

  青い字の部分で任意の行数を指定しています。
  結果、以下のように表示されます。

  1. package MT::Plugin::Precode;
  2.  
  3. use strict;
  4. use MT::Template::Context;
  5. use base qw(MT::Plugin);
  6.  
  7. my $plugin = __PACKAGE__->new({
  8.     name => 'Precode',
  9.     version => '1.04',
  10.     author_name => 'bzbell',
  11.     description => 'Preformatted Code.',
  12.     author_link => 'http://bizcaz.com/',
  13.     doc_link => 'http://bizcaz.com/archives/2007/02/10-015235.php',
  14. });
  15. MT->add_plugin($plugin);
  16.  
  17. MT::Template::Context->add_container_tag (Precode => \&precode_main);
  18.  
  19. sub precode_main
  20. {
  21.     my ($ctx, $args, $cond) = @_;
  22.  
  23.     my $builder = $ctx->stash('builder');
  24.     my $tokens = $ctx->stash('tokens');
  25.  
  26.     my $start = 1;
  27.     my $title = '';
  28.     my $over = 30;
  29.     my $html = '';
  30.  
  31.     if ($args->{'start'}) {
  32.         $start = $args->{'start'};
  33.     }
  34.  
  35.     if ($args->{'title'}) {
  36.         $title = $args->{'title'};
  37.     }
  38.  
  39.     if ($args->{'overline'}) {
  40.         $over = $args->{'overline'};
  41.     }
  42.  
  43.     my $out = $builder->build ($ctx, $tokens, $cond);
  44.  
  45.     $out = precode_sub($out, $start, $title, $over);
  46.     $html .= $out;
  47.  
  48.     $html;
  49. }
  50.  
  51. sub precode_sub
  52. {
  53.     my ($str, $start, $title, $over) = @_;
  54.  
  55.     my @result = ();
  56.     my @clname = ("\"precode-odd\"", "\"precode-eve\"");
  57.     my $out = "<div class=\"precode-block\">\n";
  58.     my $index = 0;
  59.  
  60.     if ('' ne $title) {
  61.         $out .= "<p class=\"precode-title\">$title</p>\n";
  62.     }
  63.  
  64.     @result = split(/\x0D\x0A|[\x0D\x0A]|\<br \/\>$/, $str);
  65.  
  66.     if ('' eq $result[0]) {
  67.         shift(@result);
  68.     }
  69.  
  70.     my $scroll = '';
  71.  
  72.     if ($over < @result) {
  73.         $scroll = 'scroll';
  74.     }
  75.  
  76.     if (1 < $start) {
  77.         $out .= "<div class=\"precode-wrapper ".$scroll."\">\n<ol start=\"$start\">\n";
  78.     } else {
  79.         $out .= "<div class=\"precode-wrapper ".$scroll."\">\n<ol>\n";
  80.     }
  81.  
  82.     foreach my $line (@result) {
  83.         if ('' eq $line) {
  84.             $line = ' ';
  85.         }
  86.  
  87.         $out .= '<li class='.$clname[$index].'><code>'.$line."</code></li>\n";
  88.         $index ^= 1;
  89.     }
  90.  
  91.     $out .= "</ol>\n</div>\n</div>";
  92.     return $out;
  93. }
  94.  
  95. 1;

  任意の行数に合わせて CSS の方も変更します。

  スタイルシート

  1. /*
  2.  * 縦スクロールバー表示用スタイル
  3.  */
  4. div.precode-block div.scroll {
  5.     height: 43em; /* 1.4 × 任意の表示行数(デフォルト:30行) ＋ 1em */
  6. }

以上です。
MTPrecodeプラグイン

• Related Entries
• 08/12/03MTを使ってPerlを学ぶ
• 08/06/01MTIfFileExist プラグイン for MT4.x
• 08/02/03SQL プラグイン for MT4
• 08/01/20Movable Type でリンク集を作る for MT4
• 07/10/31Asset Handler プラグイン
• 07/10/08GoogleAnalyticsWidget プラグイン
• 07/10/06PageBute プラグイン
• 07/10/02HatenaBookmarkWidget プラグイン
• 07/09/30Movable Type 4 で使用できるプラグイン
• 07/09/24MTHatenaAuth プラグイン

• Edit
• Permalink
• 17 Comments
• 3 TrackBacks