Markdown/CommonMark 探訪(2):HTML

Markdown/CommonMark の不思議な仕様を紹介していくこのシリーズ、第二回は HTML Blocks です*1

Markdown には 2種類の HTML 要素があります。ひとつはブロック要素、もうひとつはインライン要素です。
HTML ブロックは、HTML のブロックレベルの要素をそのまま Markdown で扱うためのものです。マークアップされたものはその名の通りブロック要素として扱われます。

<table><tr><td>
this is table!
</td></tr></table>

もうひとつのインライン要素は、段落やリスト、表の中など、任意の箇所で HTML を使えます。

This is a <em>markdown</em> world!

これらの例を見ると HTML 記法は比較的シンプルなものに見えます。では、これはどう解釈されるのでしょうか。ブロック要素?インライン要素?

<h1>hello markdown!</h1>

それでは、これは?

<pre>
A example a PRE tag which is not closed...

最後にもうひとつ。これは?

<em>
A example an EM tag which is not closed...

じつは 3つともブロック要素として解釈されます。
ルールを追っていくと、それぞれ以下の理由でブロック要素として判定されます。

  • <h1> タグから始まる行はブロック要素として扱われる
  • <pre> タグから始まる行もブロック要素として扱われる
  • <em> タグは本来ブロック要素ではないが、開始タグ単体で登場した場合はブロック要素

一方で、以下のようなケースはインライン要素として扱われます。

hello <h1>markdown!</h1>!

# ブロックレベルのタグであっても、行頭でなければインライン扱い
<em> A example an EM tag which is not closed...

# 開始タグと同じ行に記述があるので、インライン扱い

CommonMark のルールに従うと、ちょっとしたマークアップの違いで HTML タグはブロック要素として扱われたり、インライン要素として扱われたりと、解釈がかんたんに変わります。

最後におだいをひとつ残して、今日は終わりにしようと思います。

<del>*em*</del>
<del>
*em*
</del>
<del>

*em*

</del>

それぞれ、どんな風にレンダリングされるのかちょっと考えてみてください。
ちなみに答えはここ(
commonmark.js demo )から確認できるようにしておきました。

*1:思いつきで書き始めたので、ネタが尽きるまで書いていこうと思います