GatsbyJSのマークダウンファイル内で数式を表示する方法

高校数学をイチから勉強していて、学んだことを記事に書き残したくなったので、マークダウンで数式を表現できるライブラリを試してみた。

gatsby-remark-katex

gatsby-remark-katexは数式をWEBブラウザで表示させるライブラリKaTeXをGatsbyで使用できるプラグインです。

インストール

yarn add gatsby-transformer-remark gatsby-remark-katex

gatsby-remark-katexに必要なgatsby-transformer-remarkはマークダウンをHTMLにパースしてくれるプラグインみたいですが、このサイトで使用しているスターターgatsby-starter-blogにはデフォルトで入っているので実際にはインストールする必要はありませんでした。

インストール後にgatsby-config.jsとgatsby-browser.jsに修正が必要です。

gatsby-config.js

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

gatsby-browser.js

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

gatsby-browser.jsの方の修正はtempleteファイルに直接importを書いても大丈夫（なはず）です。

動作確認

以下のように$と$の間にKaTexの式を書くと

三平方の定理は$a^2 + b^2 = c^2$です。

三平方の定理は$a^2 + b^2 = c^2$です。

このようにインラインで表示されます。

$$と$$で挟むと

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

と書けます。

KaTeXの文法はまだ全くわかってませんが、必要なのから順番に覚えていきます。