おすすめのremark/rehypeプラグイン
はじめに
本記事では、私がNextJS個人ブログに導入しているremark/rehypeのプラグインから、おすすめのものを紹介します。
remark/rehypeとは？
remarkとrehypeは、MarkdownをHTMLに変換する際に使用されるライブラリです。
- remark: Markdownと抽象構文木（AST）を相互変換するためのライブラリ
- rehype: HTMLと抽象構文木（AST）を相互変換するためのライブラリ
remarkとrehypeは、ASTを操作するためのプラグインを提供しており、MarkdownからHTMLへの変換時に様々な情報を追加できます。 動作の流れは以下のようになります。
remark-parseでMarkdownをMarkdown ASTに変換- Markdown ASTに対してプラグインを適用
remark-rehypeでMarkdown ASTをHTML ASTに変換- HTML ASTに対してrehypeプラグインを適用
rehype-stringifyでHTML ASTをHTML文字列に変換
実際にNextJSのプロジェクトで使用する場合は、MarkdownをHTMLに変換する関数を定義すると便利です。
async function markdownToHtml(
markdown: string,
): Promise<string> {
return unified()
.use(remarkParse) // 1. MarkdownをパースしてASTに変換
.use(remarkGfm) // 2. プラグインの適用
.use(remarkRehype) // 3. Markdown ASTをHTML ASTに変換
.use(rehypeCallouts) // 4. HTML ASTに対してrehypeプラグインを適用
.use(rehypeSlug) // 4. HTML ASTに対してrehypeプラグインを適用
.use(rehypeStringify) // 5. HTML ASTをHTML文字列に変換
.process(markdown)
.then((file) => String(file));
}remark/rehypeは、あくまでMarkdownとHTMLの変換を行うライブラリです。 見た目のスタイルを変更するためには、CSSを設定する必要があります。 こだわりがない場合は、プラグインが提供するデフォルトのスタイルを使用できます。
おすすめのremark/rehypeプラグイン
import { transformerCopyButton } from "@rehype-pretty/transformers";
import rehypeExtractToc, { type Toc } from "@stefanprobst/rehype-extract-toc";
import rehypeCallouts from "rehype-callouts";
import rehypePrettyCode from "rehype-pretty-code";
import rehypeRaw from "rehype-raw";
import rehypeSlug from "rehype-slug";
import rehypeStringify from "rehype-stringify";
import remarkGfm from "remark-gfm";
import remarkLinkCard from "remark-link-card-plus";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import { unified } from "unified";
async function markdownToHtml(
markdown: string,
): Promise<{ html: string; toc?: Toc }> {
return unified()
.use(remarkParse)
.use(remarkLinkCard, {
cache: true,
})
.use(remarkGfm)
.use(remarkRehype, { allowDangerousHtml: true })
.use(rehypePrettyCode, {
theme: "github-dark-dimmed",
transformers: [transformerCopyButton()],
})
.use(rehypeCallouts)
.use(rehypeSlug)
.use(rehypeRaw)
.use(rehypeExtractToc)
.use(rehypeStringify)
.process(markdown)
.then((file) => {
return {
html: String(file),
toc: file.data.toc,
};
});
}remark-gfm
GitHub Flavored Markdown (GFM)の拡張構文をサポートするプラグインです。 テーブルやチェックボックス、打ち消し線を使用できる様になります。
remark-link-card-plus
OGP情報を取得して、リンクカードを生成するプラグインです。
別のプラグインでremark-link-cardもありますが、長いURLへの非対応や型情報が不十分という点で、remark-link-card-plusをおすすめします。
使用する際は、remarkReypeのオプションを設定する必要があります。
.use(remarkRehype, { allowDangerousHtml: true })スタイルは公式のCSSをコピペするのが簡単です。
rehype-pretty-code
リッチなコードブロックを生成するためのプラグインです。 コードのシンタックスハイライトや、コピーボタン機能を提供します。
スタイルは公式のCSSをコピペするのが簡単です。
codeやfigureに関してスタイリングしている箇所をコピペするといい感じになります。
rehype-callouts
GitHubで見かける注釈や注意書きなどを表現するためのプラグインです。 似たようなプラグインは多くありますが、以下の点が便利だったのでおすすめです。
- 折りたたみ可能な注釈を作成できる
- 別途CSSを用意する必要がない
rehype-extract-toc (+ rehype-slug)
目次を抽出するためのプラグインです。
似たようなプラグインにremark-tocやrehype-tocがありますが、表示をこだわりたい場合はrehype-extract-tocがおすすめです。
remark-tocやrehype-tocは記事内に目次を挿入するため手軽ではありますが、サイドバーに目次を表示してstickyにする場合には使用できません。
このような目的ではrehype-extract-tocを使用して、htmlとは別に目次を取得するのが便利です。
目次のリンクを有効にするためには、追加でrehype-slugを使用する必要があります。
