Gatsbyで数式を表示する

2021.05.24

gatsby-remark-katexをインストールしても数式がうまく表示されない

数式を表示させるためのプラグイン gatsby-remark-katex をインストールしても、 どうもうまく表示されない。

$a^2 + b^2 = c^2$

とMarkdownファイルに書けば、

a2+b2=c2a^2 + b^2 = c^2

とカッコよく表示されるはずなのだが。

そのまま $a^2 + b^2 = c^2$ と表示されてしまう。

不具合の原因

同様に悩んでいる方がいた。

gatsby-remark-katex の実装不備が原因で、gatsby-remark-katex 5 だと依存している remark-math 4 の利用方法が合っていないらしい。

不具合のある gatsby-remark-katex 5ではなく、gatsby-remark-katex 4 を使えば問題が起きないようだ。

gatsby-remark-katexのインストール

gatsby-remark-katex 4を使うために以下のようにプラグインを追加。

yarn add gatsby-remark-katex@~4 katex

gatsby-config.jsにも以下を設定

gatsby-config.js 
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        `gatsby-remark-katex`,
      ],
    },
  },
],

src/templates/blog-post.jsに以下を追加

src/templates/blog-post.js 
import "katex/dist/katex.min.css"

参考

Recent Posts