Gatsbyのブログで数式を書けるようにする

Gatsby.jsで作成したブログ(このブログ)で数式を書けるようにしたかったのでその手順をメモ。

プラグイン gatsby-remark-katexを使う

npm install gatsby-transformer-remark gatsby-remark-katex katex

plugin設定

gatsby-config.js

plugins: [
  ...
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-katex`,
          options: {
            // Add any KaTeX options from https://github.com/KaTeX/KaTeX/blob/master/docs/options.md here
            strict: `ignore`
          }
        }
      ],
    },
  },
],

gatsby-browser.js

import "katex/dist/katex.min.css"

書き方

数式を$$で囲む

インラインモード

$$
\frac{\partial^2 z}{\partial t^2}=c^2 (\frac{\partial^2 z}{\partial x^2}+\frac{\partial^2 z}{\partial y^2})-\mu \frac{\partial z}{\partial t}
$$

波動方程式

\frac{\partial^2 z}{\partial t^2}=c^2 (\frac{\partial^2 z}{\partial x^2}+\frac{\partial^2 z}{\partial y^2})-\mu \frac{\partial z}{\partial t}

表示モード
```
$\frac{\partial^2 z}{\partial t^2}=c^2 (\frac{\partial^2 z}{\partial x^2}+\frac{\partial^2 z}{\partial y^2})-\mu \frac{\partial z}{\partial t}$
```
波動方程式: $\frac{\partial^2 z}{\partial t^2}=c^2 (\frac{\partial^2 z}{\partial x^2}+\frac{\partial^2 z}{\partial y^2})-\mu \frac{\partial z}{\partial t}$

以上。簡単。

@putcho__をフォロー