{"pageProps":{"bread_crumbs":[{"name":"トピック一覧","href":"/topics","as":"/topics"},{"name":"Node.js","href":"/topics/[topic]","as":"/topics/[object Object]"}],"topic":{"id":"b0op_zddt","createdAt":"2021-04-11T07:59:39.164Z","updatedAt":"2021-04-11T07:59:39.164Z","publishedAt":"2021-04-11T07:59:39.164Z","revisedAt":"2021-04-11T07:59:39.164Z","name":"Node.js","posts":[],"path_name":"nodejs"},"posts":[{"id":"ojqihik3jsj","createdAt":"2021-04-11T14:32:06.885Z","updatedAt":"2021-04-11T14:33:07.796Z","publishedAt":"2021-04-11T14:32:06.885Z","revisedAt":"2021-04-11T14:33:07.796Z","title":"Markdown Parserについて調べてみた","description":"こんにちは、よしでぶです。\n今日はMarkdownのParserのライブラリについて調べたのでいくつか紹介します。\nそもそもMarkdownって何?Parserって何?ってところから軽く触れたいと思います。","body":"
Wikipediaの説明を引用します。
Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。
Markdownは一種のテキスト形式です。 ブログの多くはこのMarkdownで書かれることが多いです。
QiitaやZennの記事も元はMarkdownで書かれていて、その記事を解析してhtmlを生成しています。
この解析のことを Parse といいます。
Markdownはこんな感じで書きます。
# これは見出し1です\n見出し1は大きい文字サイズになる\n\n## これは見出し2です\n見出し2はそこそこ大きい文字サイズ\n\n- リスト1\n- リスト2\n- リスト3
Parse結果はこんな感じ。
ただのテキストファイルだったモノがhtmlに変換されるのはブログを書く上でとても楽です。
今回はNode.jsのMarkdown Parser ライブラリを3つ調べたので紹介します。
markdown-to-jsx は MarkdownをReactのコンポーネントに変換してくれるライブラリです。
ダウンロード数も多く、2020年12月現在も活発にメンテナンスされているライブラリです。
Parse結果を直接 renderできるのが特徴で直感的に使えます。
2020年12月現在、yotteqはmarkdown-to-jsxを使っています。
拡張性も高く、Markdownではなく 直接jsx形式でコンポーネントを書けたりもします。
markdown-it も大変人気なライブラリの一つです。
こちらもダウンロード数が多く、2020年12月現在も活発にメンテナンスされているライブラリです。
markdown-itは最近話題の技術共有サイト Zenn のMarkdown Parserに使われているようです。
Zennを支える技術とサービス構成|Zenn
こちらも拡張性が高く、さまざまなプラグインが揃っているそうです。
remark は私がこの中で 一番注目しているライブラリです。
公式のGitHubのページでは
remark is the world’s most popular Markdown parser!
と言ってるほどです!
実際、画像のようにmarkdown-to-jsx、markdown-it、remarkの中だと一番トレンドがあるライブラリのようです(参考)
また、Next.jsを作ってる会社のVercelがスポンサーとして付いていることからも、 Next.jsとremarkの相性はこれからもっと良くなってくるのかなと勝手に想像しています。
Next.jsの公式サンプルコードにも remarkが使われているのでこれは期待大ですね!!
Node.jsのMarkdown Parserライブラリを3つ紹介しました。
Next.jsとの相性やプラグインの豊富さやトレンドを鑑みて yotteqはmarkdown-to-jsxからremarkに乗り換えを検討しています。
また使ってみた感想を紹介できればと思います。
ではでは。
ご指摘、ご意見などがあれば お問い合わせページ からお願いします。またTwitterのDMにでもご連絡いただけたらと思います。