Next.jsで数式を書く

Next.jsで数式を書いてみたいと思うこと、ありますよね。
僕はあるので自分用にメモです。

2次方程式の解の公式、懐かしいですね。

これを見ると学生時代を思い出しますね。
こういう数式を、Next.jsでもMarkdownにで

x = \frac{-b\pm\sqrt{b^2-4ac}}{2a}

こんな感じで書けたら便利です。

今回はをMathJaxでSVGにするようにしてNext.jsで使ってみました。^{[参考文献]}

KaTeXなどでJavaScriptで動的にブラウザ上で数式を描画する方法はよく見ますが、Next.jsでSSGをしているならその時に数式をSVGにレンダリングした方がフォントを別途読み込んだりしなくてもいいので便利です。
形式の数式をHTMLへ変換する処理をブラウザがする必要がなくなり描画が高速だという点がメリットです。JavaScriptを無効化していても見れるのもいいですね。

まず、必要なパッケージをインストールします。

npm install remark-math rehype-mathjax

このウェブサイトではMarkdownを読み込むのに unified を使用しているので、 remark-math と rehype-mathjax を追加で use します。

import rehypePrism from '@mapbox/rehype-prism';
import rehypeMathJaxSvg from 'rehype-mathjax/svg';
import rehypeStringify from 'rehype-stringify';
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import { unified } from 'unified';

export const markdownToHtml = async (markdown: string) =>
  (
    await unified()
      .use(remarkParse)
      .use(remarkMath)
      .use(remarkGfm)
      .use(remarkRehype, { allowDangerousHtml: true })
      .use(rehypePrism)
      .use(rehypeMathJaxSvg)
      .use(rehypeStringify, { allowDangerousHtml: true })
      .process(markdown)
  )
    .toString();

では、実際に書いてみることにします。

任意のとの最大公約数を求める関数

\gcd(x, y) =
\begin{cases}
  y & (x = 0)\\
  x & (y = 0)\\
  \gcd(y, x \bmod y) & (\text{otherwize})
\end{cases}

クロネッカーのデルタ

\delta_{ij} =
\begin{cases}
  1 & \text{if }i = j\\
  0 & \text{if }i \ne j
\end{cases}

上手に書けました！✨

以上です。
https://github.com/nishidemasami/nishidemasami.github.io
実際にNext.jsで動いているコードは👆ここから確認してください。