モチベーション

研究や数検等のアウトプットで数式を使った記事を投稿したいが、

今のコードであるとNotionで書いた上記の式はnotion2mdを使っているので以下のように変換されそのまま表示されてしまう。

$$
X^n+Y^n=Z^n
$$

それをうまくreact-markdownで数式にもどしたい。

前提

Notionからmdへの変換は以下のライブラリ(notion2md)

react-markdownはすでに使っているので説明はしない

Notionの内容をreactで表示する方法は以下に軽くまとめてます。

追加した部分

インストール

remark-mathとrehype-katexをインストールする

npm install remark-math rehype-katex

公式がこれ

コード

import rehypeKatex from 'rehype-katex'
import remarkMath from 'remark-math'
import 'katex/dist/katex.min.css'// <-これをimportしないと数式がなぜか2つ表示される

// 省略

// remarkPluginsにremarkMath、rehypePluginsにrehypeKatexを追加する
<ReactMarkdown remarkPlugins={[remarkGfm, remarkMath]} rehypePlugins={[rehypeRaw, rehypeKatex]} className='markdown' components={
    {
        h2: H2,
        h3: H3,
        ul: Ul,
        code: Code,
        a: A
    }
}>
    {data.body}
</ReactMarkdown>

// 省略

ハマったところ

コメントアウトで注釈を入れたが、以下のcssをインポートしないと表示しなくてよい文字列が表示されてしまう

import 'katex/dist/katex.min.css'

↓こんな感じで表示されちゃう

参考