KaTeX
TeXと同じような書式で数式を表示させることができるウェブ用のライブラリは複数あります。
有名なものではMathJaxやKaTeXがあり、今回はKaTeXを用いて、Next.jsに実装する方法を紹介します。
インストール
Markdownに記述されている$で囲まれた部分をinlineMathに、$$で囲まれた部分をdisplayMathにパースするremark-mathと、KaTeXの形式に合わせてHTMLにパースするrehype-katexをインストールします。
npm install remark-math
npm install rehype-katex
実装
まずMarkdownをHTMLに変換する処理を行っているファイルに、先ほどインストールしたライブラリを使用するように追加します。
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'
// ...
const processedContent = await unified()
.use(remarkParse)
.use(remarkMath) // 追加
// ...
.use(remarkRehype)
.use(rehypeKatex) // 追加
// ...
.use(rehypeStringify)
.process(/* */)
次に、デザインを反映させるためにkatex.cssを追加する必要があります。
基本的にはKaTeXのドキュメントに書かれているlinkタグを、KaTeXを適用したいページのHeadタグに入れます。
しかし、crossoriginと>なっておりそのままだとエラーが出るので、crossOriginと />に変更する必要があります。
<Head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.css" integrity="sha384-KiWOvVjnN8qwAZbuQyWDIbfCLFhLXNETzBQjA/92pIowpC0d2O3nppDGQVgwd2nB" crossOrigin="anonymous" />
</Head>
表示結果
関数のフーリエ変換の定義は以下の通りである。