Gatsbyで数式を表示する

Posted: March 29, 2022

Image Credit: Gatsby

方法

巷でよく解説されている gatsby-remark-katex を用いた方法¹は、最近の gatsby-plugin-mdx を用いたmdxの取り回しと相性が悪く、手元では上手く機能しなかった。そのため、代わりに remark-math, rehype-katex を用いた方法^{2 3}を導入する。

まずは以下のコマンドで必要なパッケージをインストールする。この時、versionを特に指定せずに最新版を使おうとするとエラーで動かなかったため、注意する。

1
npm install remark-math@3.0.1 rehype-katex@5.0.0

次に、 gatsby-config.ts に以下のように設定を付け足す。

gatsby-config.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import type { GatsbyConfig } from "gatsby"
import path from "path"

const config: GatsbyConfig = {
  ⋮
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        remarkPlugins: [require('remark-math')],
        rehypePlugins: [
          [require('rehype-katex'), { strict: 'ignore' }],
        ],
      }
    },
  ],
  ⋮
}

export default config

最後に数式を表示するのに必要なKatex CSSを gatsby-browser.ts 内でインポートする。Katex CSSはrehype-katexの依存関係に含まれているため、別途特別にインストールする必要はない。

gatsby-browser.ts
1
import 'katex/dist/katex.min.css'

数式サンプル

試しに適当にそれっぽい数式サンプルを載せておく。

時刻 $t$ までの確率過程 $X$ の挙動 $\{X_s(\omega);\,0\le s\le t\}$ を全て可測とする $\sigma$-加法族を $\sigma(X_s;\, s\le t)$ と表す。これを右連続化したものを $\mathcal{F}_t^X$ と表すとき、それらの集まり $\{\mathcal{F}_t^X\}$ を、確率過程 $X=\{X_t\}$ により生成されるフィルトレーションと呼ぶ。

可積分なRCLL過程 $M=\{M_t;\,t\in T\}$ が $\{\mathcal{F}_t\}$ に適合していて、

を満たすとき、 $M$ を、 $\{\mathcal{F}_t\}$ に関するマルチンゲールという。