MarkdownをHTMLに変換する工程の図解
こんにちは!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って名前がつく
さいごに
色付けるとこんなかんじ。
めんどくさ!詳細はだいぶ端折ってますがこんな感じです。ほんとに似た名前多いね!以上。
PREV
2021-12-28
静的サイトのホスティング先を比較...というかひたすら羅列
NEXT
2022-01-31
メインブラウザをBraveからVivaldiに変えた感想
LINK
リンク
Twitter
GitHub
TAGS
タグ
LATESTS
最新の記事
POPULAR
人気の記事
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介