Movable Type 備忘録

MTPrecodeプラグイン

Apr152007
Author: bzbell
Categories: MovableType, Customize
Tags: MovableType, MTPrecode, Plugins

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

こんにちわ^^

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

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

- 2008.01.21 追記 -

行の先頭の空白文字(スペース、タブ)を実体参照文字に変換するよう対応しました。また、行末の空白文字を削除するよう対応しました。

- 2007.04.17 追記 -

すいません、MTPrecodeプラグインはエントリ内で使用するプラグインです。
ですので、こちらのエントリでMovableTypeのタグを使用するで紹介している、EvalTemplateプラグインと併用する必要があります。

EvalTemplateプラグインはエントリ内でもMovableType(ムーバブルタイプ)のテンプレート・タグを使用可能にしてくれるプラグインです。

- 2007.04.17 Ver1.01 -

行番号を任意の番号から開始できるよう対応しました。

- 2007.04.17 Ver.1.02 -

最初の1行目に改行が入ってしまう不具合を対応しました。

- 2007.04.17 Ver.1.03 -

タイトルを付けられるように対応しました。それに伴って、多少 CSS の変更が入ります。

- 2007.07.13 Ver.1.04 -

任意の行数を超える場合、縦スクロールバーを表示するように対応してみました。
多少 CSS を変更しました。

あと、MovableType 4でも問題なく表示できることを確認しました。

まずはサンプルですね。

package MT::Plugin::Precode;
use strict;
use MT::Template::Context;
use base qw(MT::Plugin);
my $plugin = __PACKAGE__->new({
name => 'Precode',
version => '1.04',
author_name => 'bzbell',
description => 'Preformatted Code.',
author_link => 'http://bizcaz.com/',
doc_link => 'http://bizcaz.com/archives/2007/02/10-015235.php',
});
MT->add_plugin($plugin);
MT::Template::Context->add_container_tag (Precode => \&precode_main);
sub precode_main
{
my ($ctx, $args, $cond) = @_;
my $builder = $ctx->stash('builder');
my $tokens = $ctx->stash('tokens');
my $start = 1;
my $title = '';
my $over = 30;
my $html = '';
if ($args->{'start'}) {
$start = $args->{'start'};
}
if ($args->{'title'}) {
$title = $args->{'title'};
}
if ($args->{'overline'}) {
$over = $args->{'overline'};
}
my $out = $builder->build ($ctx, $tokens, $cond);
$out = precode_sub($out, $start, $title, $over);
$html .= $out;
$html;
}
sub precode_sub
{
my ($str, $start, $title, $over) = @_;
my @result = ();
my @clname = ("\"precode-odd\"", "\"precode-eve\"");
my $out = "<div class=\"precode-block\">\n";
my $index = 0;
if ('' ne $title) {
$out .= "<p class=\"precode-title\">$title</p>\n";
}
@result = split(/\x0D\x0A|[\x0D\x0A]|\<br \/\>$/, $str);
if ('' eq $result[0]) {
shift(@result);
}
my $scroll = '';
if ($over < @result) {
$scroll = 'scroll';
}
if (1 < $start) {
$out .= "<div class=\"precode-wrapper ".$scroll."\">\n<ol start=\"$start\">\n";
} else {
$out .= "<div class=\"precode-wrapper ".$scroll."\">\n<ol>\n";
}
foreach my $line (@result) {
if ('' eq $line) {
$line = ' ';
}
$out .= '<li class='.$clname[$index].'><code>'.$line."</code></li>\n";
$index ^= 1;
}
$out .= "</ol>\n</div>\n</div>";
return $out;
}
1;

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

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

MTPrecodeプラグインの使い方

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

<MTPrecode>
<div>
<ul>
<li>xxxxx</li>
</ul>
</div>
</MTPrecode>

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

<div class="precode-block">
<p class="precode-title">タイトル</p>
<div class="precode-wrapper">
<ol>
<li class="precode-odd"><span class="code"> <div></li>
<li class="precode-eve"><span class="code"> <ul></li>
<li class="precode-odd"><span class="code"> <li>xxxxx</li></li>
<li class="precode-eve"><span class="code"> </ul></li>
<li class="precode-odd"><span class="code"> </div></li>
</ol>
</div>
</div>

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

div.precode-block {
margin: 1em 0;
border: 5px solid #31313b;
background-color: #fefefe;
}
div.precode-block p.precode-title {
margin: 0;
padding: 0;
padding-bottom: 5px;
color: #d3d9f0;
background-color: #31313b;
}
div.precode-block div.precode-wrapper {
overflow: auto;
}
/*
* 縦スクロールバー表示用スタイル
*/
div.precode-block div.scroll {
height: 43em; /* 1.4 × 任意の表示行数(デフォルト:30行) ＋ 1em */
}
div.precode-block ol {
margin: .5em 0 .5em 55px;
padding: 0;
color: #2b91af;
background-color: #fefefe;
}
div.precode-block ol li {
padding: 0 .5em;
line-height: 1.4;
border-left: 2px solid #303;
}
div.precode-block ol li code {
font-family: monospace, 'Courier New', Courier, Fixed !important;
white-space: pre;
/*
* 横スクロールを表示せずに、折り返して表示させる場合
*/
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* IE 5.5+ */
color: #303;
}
div.precode-block ol li.precode-odd {
background-color:#e7e7e7;
}
div.precode-block ol li.precode-eve {
}

オプション

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

start
指定した行番号から採番できます。デフォルトは1番から採番されます。
1. <MTPrecode start="400">
2. <div>
3. <ul>
4. <li>xxxxx</li>
5. </ul>
6. </div>
7. </MTPrecode>
青い字の部分で開始番号(=400)を指定しています。
結果、以下のように表示されます。
1. <div>
2. <ul>
3. <li>xxxxx</li>
4. </ul>
5. </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>
青い字の部分でタイトル表示の指定をしています。
結果、以下のように表示されます。
タイトル表示
1. <MTPrecode start="400" title="タイトル表示">
2. <div>
3. <ul>
4. <li>xxxxx</li>
5. </ul>
6. </div>
7. </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;
3. use strict;
4. use MT::Template::Context;
5. use base qw(MT::Plugin);
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);
17. MT::Template::Context->add_container_tag (Precode => \&precode_main);
19. sub precode_main
20. {
21. my ($ctx, $args, $cond) = @_;
23. my $builder = $ctx->stash('builder');
24. my $tokens = $ctx->stash('tokens');
26. my $start = 1;
27. my $title = '';
28. my $over = 30;
29. my $html = '';
31. if ($args->{'start'}) {
32. $start = $args->{'start'};
33. }
35. if ($args->{'title'}) {
36. $title = $args->{'title'};
37. }
39. if ($args->{'overline'}) {
40. $over = $args->{'overline'};
41. }
43. my $out = $builder->build ($ctx, $tokens, $cond);
45. $out = precode_sub($out, $start, $title, $over);
46. $html .= $out;
48. $html;
49. }
51. sub precode_sub
52. {
53. my ($str, $start, $title, $over) = @_;
55. my @result = ();
56. my @clname = ("\"precode-odd\"", "\"precode-eve\"");
57. my $out = "<div class=\"precode-block\">\n";
58. my $index = 0;
60. if ('' ne $title) {
61. $out .= "<p class=\"precode-title\">$title</p>\n";
62. }
64. @result = split(/\x0D\x0A|[\x0D\x0A]|\<br \/\>$/, $str);
66. if ('' eq $result[0]) {
67. shift(@result);
68. }
70. my $scroll = '';
72. if ($over < @result) {
73. $scroll = 'scroll';
74. }
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. }
82. foreach my $line (@result) {
83. if ('' eq $line) {
84. $line = ' ';
85. }
87. $out .= '<li class='.$clname[$index].'><code>'.$line."</code></li>\n";
88. $index ^= 1;
89. }
91. $out .= "</ol>\n</div>\n</div>";
92. return $out;
93. }
95. 1;
任意の行数に合わせて CSS の方も変更します。
スタイルシート
1. /*
2. * 縦スクロールバー表示用スタイル
3. */
4. div.precode-block div.scroll {
5. height: 43em; /* 1.4 × 任意の表示行数(デフォルト:30行) ＋ 1em */
6. }

以上です。
MTPrecodeプラグイン

Trackback Pings(0)

TrackBack URL for this entry:

No trackbacks found.

Comments(8)

#1: Posted by kazuking [RES]: 勝手にこのようなプラグイン待ってました！JavaScriptのOFF時の事考えると最近は使うスクリプトも色々と選んでしまう今日この頃です。使わせて頂きます。ありがとう御座います！
Posted on April 23, 2007

#2: Posted by bzbell [RES]

>>1 kazuking さん

はじめまして^^

使っていただいてありがとうございます (m;_ _)mペコ

> …JavaScriptのOFF時の事考えると最近は使うスクリプトも色々と選んでしまう今日この頃です。

そうですね。
わたしはkazuking さんのようにJavaScript Offのことは考慮してませんが (;￣∇￣A、本来なら考慮すべきですよね。

実際にわたしも各エントリで使ってますが、何か不都合などありましたらご連絡ください。

Posted on April 24, 2007

#3: Posted by sagasan [livedoor.com] [RES]

初めまして。ありがたく使わせていただいてます。

ところで、Windows XP、IE7で表示させた場合、
スペースが無視されてしまうようです。
oPERA9では問題ありませんでした。

何らかの回避方法をご存じでしたら、ご教授くださいませんか？

Posted on January 19, 2008

#4: Posted by bzbell [RES]

>>3 sagasan [livedoor.com] さん

こんばんわ^^

> ところで、Windows XP、IE7で表示させた場合、
> スペースが無視されてしまうようです。
> oPERA9では問題ありませんでした。

えっ
確認してみます。

Posted on January 19, 2008

#5: Posted by bzbell [RES]

>>3 sagasan [livedoor.com] さん

こんばんわ^^

> ところで、Windows XP、IE7で表示させた場合、
> スペースが無視されてしまうようです。
> oPERA9では問題ありませんでした。

上記の件ですが、改善したと思います
お手数ですが再度ダウンロードしてご確認していただけますか。

Posted on January 21, 2008

#6: Posted by sagasan [livedoor.com] [RES]

>>5 bzbell さん
改良ありがとうございました。
でも・・・
ちょっとだけ、問題が残っているようです。
複数スペースが単一スペースとして
認識されてしまっています。

IE7独自の問題なんでしょうか？

Posted on January 21, 2008

#7: Posted by sagasan [livedoor.com] [RES]

>>5 bzbell さん
自分なりに検証してみたので、ご報告致します。
問題はCSSにある模様

div.precode-block ol li code の
whitespace: pre;を最後に指定するようにすると
うまくいきました。

div.precode-block ol li code { font-family: monospace, 'Courier New', Courier, Fixed !important; /* * 横スクロールを表示せずに、折り返して表示させる場合 */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: pre-wrap; /* CSS3 */ word-wrap: break-word; /* IE 5.5+ */ white-space: pre; color: #303;}
preが上書きされて設定されてしまうのでしょうか？

Posted on January 21, 2008