Gatsby で数式が正しく表示されない問題の対処法

2021-05-18Gatsbywebsite

概要

gatsby-remark-katex と katex を入れれば数式が書けるという説明があるのだけど、見事にハマったので原因と対処法を紹介します。

追記（2021-06-15）

不具合は gatsby-remark-katex 5.4.1 で解決した模様 Change Log

数式を表示する方法

改めてやり方を復習しておくと、こんな感じ。

プラグインのインストール

$ npm install gatsby-remark-katex katex

gatsby-config.js

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

ブログ記事のテンプレート blog-post.js

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

記事での数式の書き方

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

特段難しくなさそうなのだけど。。。

トラブル

数式が全く変換されずに $a^2 + b^2 = c^2$ とそのまま出力されてしまう！！

関連パッケージのバージョンは以下の通り。

  • gatsby-remark-katex: 5.2.0
  • gatsby-transformer-remark: 3.2.0
  • katex: 0.12.0
  • gatsby: 3.5.0
  • react: 17.0.2

原因

不具合報告 upgrading to gatsby-remark-katex v5.0.0 and/or gatsby-transformer-remark v4.0.0 breaks katex math equation · Issue #30865 · gatsbyjs/gatsby によると、gatsby-remark-katex の実装不備が原因、もう少し詳しく言えば remark-math の利用手続きが正しくない らしい。

gatsby-remark-katex 5 は remark-math 4 (remark 13 ベース) に依存しているのだけど、remark 13 の大規模改定の影響を受けて remark-math 4 の利用方法が大幅に変更 されたようだ。remark-math の readme では、unified と rehype を利用して

  • remark-parse
  • remark-math
  • remark-rehype
  • rehype-katex
  • rehype-stringify

という順番で適用する実装方法が案内されている。ところが最新の gatsby-remark-katex 5.2.0 でも、実装が古いままになっている。

対処法

対処法は２つ

  • 対処法 1: gatsby-remark-katex 5 系を使わない
  • 対処法 2: unified と rehype-parse を使うように gatsby-remark-katex を修正（詳細は上記の不具合報告を参照）

ここは保守的に、手間がかからない対処法 1 で行くことにした。

$ npm install gatsby-remark-katex@~4

これで無事に数式が表示できるようになった！

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

まとめ

とりあえず、喜びのラマヌジャンのΔ\Delta！

Δ(z)=q∏n=1∞(1−qn)24=∑n=1∞τ(n)qn\Delta(z) = q \prod_{n=1}^{\infty} (1 - q^n)^{24} = \sum_{n=1}^{\infty} \tau(n)q^n

バージョンアップには日頃から気をつけよう。

そして gatsby-remark-katex が早く修正される事を願う。