Next.js + MDX で数式を扱う
11/8/2019, 2:26:14 PM - 521 days ago
Next.js と MDX で構築されたこのブログで、TeX を扱えるようにしていきたいと思います。
まず、@mdx-js/loader を入れます。これは next.config.js 内で MDX 向けのプラグインをカスタマイズするのに必要です。入っていなければ、
npm install @mdx-js/loader
してください。
その後は、
npm install remark-math@3.0.1
npm install rehype-katex@3.0.0
してから、ドキュメンテーション通りに next.config.js を編集しましょう。
2020.10.20 追記
最新バージョンの remark-math と rehype-katex ではうまく数式がレンダリングされないことが判明したので、バージョンを付記しておきました。
このブログのリポジトリのコミットも参考にしてください。
これで TeX を使う準備が整います。
MDX 内で KaTeX CSS を挿入する必要があることにも注意しましょう（数式をブログでよく使う人は、ブログのテンプレートにCSSの部分も加えた方がいいかもしれませんね！）。
これで無事に が使えるようになりましたね！