盖茨比-备注-我的盖茨比博客中的katex插件不能正常工作。

Question

我希望能够在我的Gatsy博客中呈现数学方程，无论是内联模式还是显示模式。

我用Markdown写博客。

我安装了gatsby-remark-katex插件，方法是在下面的链接中跟随说明：盖茨比-评论-凯特克斯

实质上有三个步骤：

步骤-1：安装gatsby-transformer-remark gatsby-remark-katex katex我在安装中没有犯任何错误。我在我的package.json文件中看到了这些包。

步骤2：在gatsby.config.js中添加以下代码片段。

{
  resolve: `gatsby-remark-katex`,
  options: {
    strict: `ignore`,
  },
},

在添加了上面的代码片段之后，我的gatsby.config.js如下所示：

module.exports = {
  siteMetadata: { title: "Hemanta Sundaray - Full-stack JavaScript Engineer" },
  plugins: [
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: ["UA-180842449-2"],
      },
    },
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-sharp`,
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "src",
        path: `${__dirname}/src`,
      },
    },

    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-katex`,
            options: {
              strict: `ignore`,
            },
          },
          `gatsby-remark-reading-time`,
          {
            resolve: `gatsby-remark-code-titles`,
          },
          {
            resolve: `gatsby-remark-vscode`,
            options: {
              theme: `SynthWave '84`,
              extensions: ["synthwave-vscode"],
              inlineCode: {
                marker: ".",
              },
            },
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 800,
              quality: 100,
            },
          },
          {
            resolve: `gatsby-remark-table-of-contents`,
            options: {
              exclude: "Table of Contents",
              // tight: false,
              // ordered: false,
              fromHeading: 2,
              toHeading: 4,
              className: "table-of-contents",
            },
          },
          `gatsby-remark-autolink-headers`,
        ],
      },
    },
  ],
}

我在这一步做错了吗？

步骤-3：将KATEX添加到模板中。

添加了KATEX后，我的gatsby.browser.js文件如下所示。

import "./src/styles/global.css"
import "katex/dist/katex.min.css"

gatsby.browser.js是否是需要添加Katex的正确文件？

我还尝试在index.js文件中添加Katex；但是输出并不像预期的那样。

在遵循上述三个步骤之后，我测试了以下标记：

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

然而，数学方程没有正确地呈现：

我收到了以下输出：

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

我做错了什么？

Answer 1

我认为你的问题在第三步。

您需要在构建blog-post组件的同一个文件中添加import "katex/dist/katex.min.css"，从标记文件开始。

在这个文件中，您可能会执行类似于dangerouslySetInnerHTML={{ __html: html }}的操作