Gatsby＋Contentful＋KaTeXで数式がうまく表示できない

Question

やりたいこと

Contentful（CMS）のコンテンツを、マークダウン記法とKaTex記法を用いて執筆したいです。

困っていること

プラグインgatsby-remark-katexのドキュメントを参考にコードを書き換えたのですが、うまく反映されません。

ネットで調べてmdxのプラグインを使う例なども見て試したりしましたが上手くいきません。ただ、Reactの知識もないので根本的なところで間違っている可能性もあります。そこで、後述のコードやプラグインで誤りや確認すべき点があれば、ご指摘いただけると助かります。

環境

• Gatsby 3.3.0
• gatsby-transformer-remark 4.1.0
• gatsby-remark-katex 5.1.0
• CMS：Contentful（ブログコンテンツは、Long text の Markdown に設定）
• 確認用のブラウザ：Google Chrome

コード

gatsby-config.js, gatsby-blowser.js, ブログ記事テンプレートファイル(.js)の内容は以下の通りです。

gatsby-config.js

module.exports = {
  siteMetadata: {
    // *****(中略)*****
  },
  plugins: [
    // *****(中略)*****
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        commonmark: true,
        footnotes: true,
        pedantic: true,
        gfm: true,
        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-plugin-sass`,
  ],
};

gatsby-blowser.js

require(`katex/dist/katex.min.css`)

src/templates/blogpost-template.js（ブログ記事のテンプレートファイル）

import React from "react"
import { graphql, Link } from "gatsby"

import Layout from "../components/layout"

// *****(中略)*****

export default function Blogpost ({ data, pageContext, location }) {
    const { contentfulBlogPost: post } = data
    return (
        <Layout>
          // *****(中略)*****
                    <div className="postbody"
                        dangerouslySetInnerHTML={{ __html: post.content.childMarkdownRemark.html }}
                    />
          // *****(中略)*****
        </Layout>
    )
}

export const query = graphql`
    query($id: String!) {
        contentfulBlogPost(id: { eq: $id }) {
            title
            slug
            publishDate
            publishDateJP: publishDate(formatString: "YYYY/MM/DD")
            updatedAt
            updatedAtJP: updatedAt(formatString: "YYYY/MM/DD")
            category {
                category
                categorySlug
            }
            content {
                childMarkdownRemark {
                  html
                }
            }
        }
    }
`

(5/5追記）気になること

Google Chromeのデベロッパーツールで確認すると、$$で囲った箇所にはclass="math math-display"が、$で囲った箇所にはclass="math math-inline"が付与されていました。

しかし、node_modulesディレクトリにあるkatex/dist/katex.min.css内を検索しても、math-displayやmath-inlineのクラスに関する記述は見当たりませんでした。

修正箇所

• （5/9）ファイル名に誤りがあったので手元の環境で修正しました。

誤：gatsby-blowser.js
正：gatsby-browser.js

Answer 1

gatsby-remark-katexのバージョンがv5.0.0以上、もしくはgatsby-transformer-remarkのバージョンがv4.0.0以上の場合は問題が生じるようです。

(参考1)Githubのissue：upgrading to gatsby-remark-katex v5.0.0 and/or gatsby-transformer-remark v4.0.0 breaks katex math equation #30865
(参考2)Qiitaの記事：新卒プログラマーがGatsbyで個人サイト兼ブログを作ってみた

ただ、上述の記事を参考にして試しても手元の環境ではうまくいかず、こちらを参考にCDNでkatexを読み込むことにしました。

また、ページ遷移時は数式がレンダリングされず、リロードする必要があります。このような問題は残っていますが、ひとまずkatexの数式表示が反映されることは確認できたので、この質問はクローズにします。

なお、コーディング内容は次の通りです。

src/pages/index.js

import React from "react"
import Layout from "../components/layout"
import Seo from "../components/seo"

export default function Index ({ data }) {
  return (
    <Layout>
      <Seo />
      <div>
        $y = x^2$
      </div>
    </Layout>
  )
}

src/components/layout.js

import React from "react"
import Header from "../components/header"
import Footer from "../components/footer"
import "./layout.scss"

export default function Layout ({ children }) {
    return (
        <div>
            <Header />

            <div className="main-wrapper">
                {children}
            </div>

            <Footer />
        </div>
    )
}

src/components/seo.js

import React from "react"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"

export default function Seo ( props ) {
    // *****(中略)*****
    return (
        <Helmet>
            // *****(中略)*****
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css" integrity="sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc" crossorigin="anonymous" />
            <script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js" integrity="sha384-YNHdsYkH6gMx9y3mRkmcJ2mFUjTd0qNQQvY9VYZgQd7DcN7env35GzlmFaZ23JGp" crossorigin="anonymous"></script>
            <script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"
                onload="renderMathInElement(document.body, {
                    delimiters: [
                        {left: '$$', right: '$$', display: true},
                        {left: '$', right: '$', display: false},
                        {left: '\(', right: '\)', display: false},
                        {left: '\[', right: '\]', display: true}
                    ],
                });">
            </script>

            // *****(中略)*****
        </Helmet>
    )
}