こんにちは！MarkdownのCSS設計に悩むMizutani(@sirycity)です。class付けれないの辛い。

今日はそんなMarkdownをHTMLに変換する工程を図で説明します。そんな複雑じゃないけど、似た名前のライブラリが多いからね。

シンプルな図解

簡単に言うとMarkdownを変換してHTMLができます。当たり前だけど。

主な3工程

Markdownは直接HTMLになるわけじゃなくて、Mdastになった後にHastになってその後にHTMLになります。3ステップです。こんな感じ。

全ての工程

とはいっても、変換の工程はその3ステップだけってわけじゃないです。もっといっぱいあります。ポイントはこんなかんじ。

• Markdown→Mdastは一方通行。
• Mdast←→Hastはどっちからどっちも変換できる。
• Hast→HTMLも一方通行。
• MdastはMdastに変換できる。
• HastはHastに変換できる。
• Mdast→HTMLに直接変換するショートカットがある。

図だとこんなかんじ。

全ての名称

↑の図に変換っていっぱい書いてあるけど、この変換する行為には全部ライブラリ名が付いています。こんなかんじ。

ポイントはこんなん。

• unifiedとremark-parseを統合したやつがremark
• remark-rehypeとrehype-stringifyを統合したやつがremark-html
• Mdast関係のライブラリ名にはremarkって名前がつく
• Hast関係のライブラリ名にはrehypeって名前がつく

さいごに

色付けるとこんなかんじ。

めんどくさ！詳細はだいぶ端折ってますがこんな感じです。ほんとに似た名前多いね！以上。