53ningen.com53ningen.com
Loading...

react-markdown で数式を表示させる

2022/01/22 10:57
2022/01/22 10:57
Programming
React
react-markdown を使って Markdown 形式の記事を SSG する際に数式もいい感じに表示できるようにした。
といっても、react-markdown の README.md に書かれているとおりの手順を進めるだけ（この記事は半分数式のテスト表示のため...）。

導入手順

以下の 2 ステップ
  1. yarn add remark-math rehype-katex
  2. ReactMarkdown 要素の rehypePlugins に rehypeKatex を追加、remarkPlugins に remarkMath を追加
+ import remarkMath from 'remark-math'
+ import rehypeKatex from 'rehype-katex'
+ import 'katex/dist/katex.min.css'
...
    <ReactMarkdown
+     rehypePlugins={[irehypeKatex]}
+     remarkPlugins={[remarkMath]}

テスト

試しにナビエ-ストークス方程式を表示してみる。Markdown ファイルに直接以下のような記述を行う。
$$\rho \frac{D \bm{u}}{Dt} = -
abla p + (\lambda + \mu ) 
abla (
abla \cdot \bm{u}) + \mu 
abla ^{2} \bm{u} +\rho \tilde{\bm{F}}$$
このブログにうまく remark-math, rehype-katex が導入できていれば数式が以下に表示される。
abla p + (\lambda + \mu ) abla ( abla \cdot \bm{u}) + \mu abla ^{2} \bm{u} +\rho \tilde{\bm{F}}$$ いい感じに表示されているっぽいので大成功！