Next.jsのマークダウンブログに数式を導入する

2024/12/03 投稿

はじめに

Next.jsのマークダウンブログに数式を導入します。このサイトではunifiedを使用しているため、以下のパッケージが使用できます。
rehype-katex
npm
rehype-katex

rehype-katexの導入

変更箇所は2つだけです。 まず、unifiedのuse(remarkParse)とuse(remarkRehype)の間にuse(remarkMath)を、use(remarkRehype)の後にuse(rehypeKatex)を追加します。
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'
/* 省略 */
unified()
  .use(remarkParse)
  /* 省略 */
  .use(remarkMath)
  .use(remarkRehype)
  .use(rehypeKatex)
  /* 省略 */

次にcssの読み込みを追加します。

/* globals.css に追加 */
@import 'katex/dist/katex.min.css';

数式の書き方

インライン数式

$で囲むとインライン数式になります。
こんな感じで $a^2 + b^2 = c^2$ 数式を書くことができます。
こんな感じで a2+b2=c2a^2 + b^2 = c^2 数式を書くことができます。

ブロック数式

行列を書いてみます。

$$
\begin{pmatrix}
  1 & 2 & 3 \\
  4 & 5 & 6 \\
  7 & 8 & 9
\end{pmatrix}
$$
(123456789)\begin{pmatrix} 1 & 2 & 3 \\ 4 & 5 & 6 \\ 7 & 8 & 9 \end{pmatrix}

まとめ

rehype-katexを使うことで、簡単に数式を導入できました。このブログのようにSSGでも問題なく動作しました。