gatsby - gatsby-theme-blog に katex プラグインを追加する方法

Question

私はギャツビー（およびフロントエンド全般）の初心者です。ブログのテーマhttps://www.gatsbyjs.org/packages/gatsby-theme-blog/に基づいて、katex プラグインhttps://www.gatsbyjs.org/packages/gatsby-remark-katex/をプロジェクトに追加しようとしていますしかし、それは機能していません。

私がしたことは次のとおりです。gatsby-theme-blog

$ gatsby new my-themed-blog https://github.com/gatsbyjs/gatsby-starter-blog-theme
$ cd my-themed-blog

gatsby-remark-katexプロジェクトの先頭で、プラグインをインストールし、

$ npm install --save gatsby-transformer-remark gatsby-remark-katex katex

構成を最上位に追加しますgatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-blog`,
      options: {},
    },
    {
      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`
            }
          }
        ],
      },
    },
  ],
  // Customize your site metadata:
  siteMetadata: {
    // ... cutting the following
  },
}

トップレベルでcssを次のようにインポートしgatsby-browser.jsます

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

そして、私がいくつかのマークダウンドキュメントをcontent/posts好きなように置くと

---
title: Hello World (example)
date: 2019-12-18
---

math $x + y = \epsilon$.

Webページは次のように表示されます

Hello World (example)
December 18, 2019

math $x + y = \epsilon$.

私はプレーンな gatsby プロジェクトとブログ スターターhttps://www.gatsbyjs.org/starters/gatsbyjs/gatsby-starter-blog/ から開始するようにそれを行いました

$ gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog

gatsby-config.jsのように編集

    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
          {
            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

// custom typefaces
import "typeface-montserrat"
import "typeface-merriweather"

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

そしてそれは働いています。

blog-theme のようなテーマを使用してプロジェクトに katex プラグインを追加するにはどうすればよいですか? どういうわけかテーマディレクトリに追加する必要がありnode_modulesますか?

ありがとう！