Hatena::Groupsubtech

冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。

 | 

Nov 18, 2011 (Fri)

Text::Xatena を HTML5 化したい 00:26 はてなブックマーク - Text::Xatena を HTML5 化したい - 冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。

Text::Xatena というはてな記法っぽいものをパースして HTML 化するモジュールがあるのですが、0.14 から出力がカスタマイズできるようになりました。https://metacpan.org/module/SATOH/Text-Xatena-0.14/lib/Text/Xatena.pm

たとえば、HTML5 な感じのサイトでは div class="section" とか使っていると笑われてしまいますが、以下のように new の引数にテンプレートを渡すことで、細かい出力挙動を変更することができるようなり、HTML5 対応と言えるようになります。

渡しているテンプレートの形式は Text::MicroTemplate の区切り文字を {{ と }} にしてインデントを無視 (per-line style を使いやすいように)するようにしたものです。

ちなみに our + local によるカスタマイズ(?)を止めたいという思惑もあります (JS に移植するときに困るので)

subtest html5 => sub {
    my $thx = Text::Xatena->new(
        templates => {
            'Section' => q[
                <section class="level-{{= $level }}">
                    <h1>{{= $title }}</h1>
                    {{= $content }}
                </section>
            ],
            'Blockquote' => q[
                <figure>
                ? if ($cite) {
                    <blockquote cite="{{= $cite }}">
                        {{= $content }}
                    </blockquote>
                    <figcaption>
                        <cite><a href="{{= $cite }}">{{= $cite }}</a></cite>
                    </figcaption>
                ? } else {
                    <blockquote>
                        {{= $content }}
                    </blockquote>
                ? }
                </figure>
            ],
        },
    );

    eq_or_diff_html $thx->format(unindent q{
        * foobar

        baz

        >http://example.com/>
        quote
        <<

        * piyo
    }), q{
        <section class="level-1">
            <h1>foobar</h1>
            <p>baz</p>
            <figure>
                <blockquote cite="http://example.com/">
                    <p>quote</p>
                </blockquote>
                <figcaption>
                    <cite><a href="http://example.com/">http://example.com/</a></cite>
                </figcaption>
            </figure>
        </section>

        <section class="level-1">
            <h1>piyo</h1>
        </section>
    };
};
 | 

スポンサード リンク

書いてる人

cho45 (佐藤広央) (www.lowreal.net)

Perl, JavaScript, Ruby, HTML, CSS, Web etc


スポンサード リンク