reading and coding ...

Next.js + MDX で数式を扱う

11/8/2019, 2:26:14 PM - 196 days ago

Next.js と MDX で構築されたこのブログで、TeX を扱えるようにしていきたいと思います。
まず、@mdx-js/loader を入れます。これは next.config.js 内で MDX 向けのプラグインをカスタマイズするのに必要です。入っていなければ、

npm install @mdx-js/loader

してください。

その後は、

npm install remark-math
npm install rehype-katex

してから、ドキュメンテーション通りに next.config.js を編集しましょう。

このブログのリポジトリのコミットも参考にしてください。

これで TeX を使う準備が整います。
MDX 内で KaTeX CSS を挿入する必要があることにも注意しましょう(数式をブログでよく使う人は、ブログのテンプレートにCSSの部分も加えた方がいいかもしれませんね!)。

L=12ρv2SCLL = \frac{1}{2} \rho v^2 S C_L
f(x)=f^(ξ)e2πiξxdξf(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi

これで無事に TeX\TeX が使えるようになりましたね!