monolithic kernel

MarkdownをHTML5に変換したい

Pure RubyなMarkdown処理系であるKramdownを少しいじって、MarkdownからHTML5を生成できるようにしてみました。

はじめに

インストールして試す前にHTML4の問題点とHTML5を使う利点について少し書いておきます。知っている方は読み飛ばしてください。

HTML4の問題点

HTML4では、文書のアウトライン構造を表現するのにh1からh6のタグ(hxタグ)を利用していました。普通の文書であればこれでも問題ありませんでしたが、ブログやWikiなどではWebサイトのタイトルや記事のタイトルにもhxタグを利用するため、最終的に生成されるHTML文書について考え、どの部分にどのランクのタグを使うのかを事前に決めておく必要が生じてしまいました。使うランクを決めてしまえばそれでいい、と思うかもしれませんが、この方法をとると別の問題が生じてしまいます。

例としてブログを構築し、ブログのタイトルを表現するのにh1、記事のタイトルを表現するのにh2、本文中ではh3以降を利用するとします。ここで、記事をカテゴリ別に一覧表示するページを追加し、そのページでは「○○カテゴリの記事」という見出しを表示することになったとします。「○○カテゴリの記事」という見出しはブログのタイトルよりは低いランクで、記事のタイトルよりは高いランクにするのが妥当だと考えられますが、h1とh2の間に相当するタグは存在しないため、h2はh3、h3はh4、といったように1つずつタグをずらして空きを作らなければなりません。仮にブログシステムがhxタグをずらす機能を持っていたとしても、ずれを考慮してCSSを設計するのは困難です。

このように、HTML4のhxタグには柔軟性が低いという問題があります。

HTML5を使う利点

HTML5では、article/aside/section/navタグを利用してアウトライン構造を表現する方法が追加されました。article/aside/section/navの細かな違いについてはここでは割愛しますが、これらのタグを入れ子にすることで、その構造がそのままアウトライン構造として解釈されます。

また、HTML5では上の階層のセクションで利用したhxタグを下の階層で利用しても問題ありません。そのため、適切にセクションを使ってアウトライン構造を表現していれば、常にh1タグのみを使っていても問題ないことになり、グローバルなhxタグの番号を管理しなければならないという問題から解放されるほか、文書の再利用性が向上し、HTML文書の一部を切りだして別のHTML文書を再構築することなどが容易になるという利点があります。

インストール

GitHubにしかないのでgitを使ってインストールします。なお、すでにkramdownが入っていると上書きしてしまうので、rvmでgemsetを作ってからインストールすることを推奨します。

Terminal window
git clone https://github.com/mono0x/kramdown.git
cd kramdown
git checkout origin/html5
rvm gemset create kramdown-html5
rvm gemset use kramdown-html5
gem install rake
rake dev:gem
gem install pkg/kramdown-0.13.3.gem

動作確認

適当なサンプルを作成して動作確認してみました。実行結果だけだと分かりづらいので、HTML 5 Outlinerを用いてアウトライン構造を表示した結果も示しておきます。

Terminal window
kramdown --no-auto-ids test.md

test.md

# Markdown → HTML5のテスト


MarkdownをHTML5に変換するテストです。


# 見出し1


- リスト
- の
- テスト


## 見出し1.1


## 見出し1.2


### 見出し1.2.1


### 見出し1.2.2


1. [Wikipedia](http://ja.wikipedia.org/wiki/Markdown)


## 見出し1.3


# 見出し2

実行結果 (HTML5)

<section>
    <h1>Markdown → HTML5のテスト</h1>
    <p>MarkdownをHTML5に変換するテストです。</p>
</section>
<section>
    <h1>見出し1</h1>
    <ul>
        <li>リスト</li>
        <li>の</li>
        <li>テスト</li>
    </ul>
    <section>
        <h1>見出し1.1</h1>
    </section>
    <section>
        <h1>見出し1.2</h1>
        <section>
            <h1>見出し1.2.1</h1>
        </section>
        <section>
            <h1>見出し1.2.2</h1>
            <ol>
                <li><a href="http://ja.wikipedia.org/wiki/Markdown">Wikipedia</a></li>
            </ol>
        </section>
    </section>
    <section>
        <h1>見出し1.3</h1>
    </section>
</section>
<section>
    <h1>見出し2</h1>
</section>
  1. Untitled Section
    1. Markdown → HTML5のテスト
    2. 見出し1
      1. 見出し1.1
      2. 見出し1.2
        1. 見出し1.2.1
        2. 見出し1.2.2
      3. 見出し1.3
    3. 見出し2

それっぽいアウトライン構造が構築できているようです。一番ランクの高いセクションがUntitled Sectionになっていますが、これは外側に記事のタイトルを付けることを想定しています。とはいえ、Markdownファイルが単独で完結していたほうがいいような気もしますし、微妙なところかもしれません。

実行結果 (HTML4)

<h1>Markdown → HTML5のテスト</h1>
<p>MarkdownをHTML5に変換するテストです。</p>
<h1>見出し1</h1>
<ul>
    <li>リスト</li>
    <li>の</li>
    <li>テスト</li>
</ul>
<h2>見出し1.1</h2>
<h2>見出し1.2</h2>
<h3>見出し1.2.1</h3>
<h3>見出し1.2.2</h3>
<ol>
    <li><a href="http://ja.wikipedia.org/wiki/Markdown">Wikipedia</a></li>
</ol>
<h2>見出し1.3</h2>
<h1>見出し2</h1>
  1. Markdown → HTML5のテスト
  2. 見出し1
    1. 見出し1.1
    2. 見出し1.2
      1. 見出し1.2.1
      2. 見出し1.2.2
    3. 見出し1.3
  3. 見出し2

Untitled Section以外はHTML5とまったく同じ結果になりました。