盖茨比博客中的Gatsby -remark-katex插件不能正常工作

Question

我希望能够在我的Gatsy博客中以内联模式呈现数学方程&显示模式。

我用Markdown写博客。

我按照以下链接的说明安装了gatsby-remark-katex插件:

基本上有三个步骤:

步骤1:安装gatsby-transformer-remarkgatsby-remark-katexkatex我在安装过程中没有任何错误。我在我的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 CSS添加到模板中。

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

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

需要添加Katex CSS的文件是gatsby.browser.js吗?

我还尝试在index.js文件中添加Katex CSS;然而，输出结果并不如预期。

在完成上述3个步骤之后，我测试了以下markdown:

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

但是，Math equation没有正确渲染:

我收到以下输出:

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

我做错了什么?

Answer 1

我想你的问题在第三步。

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

一个你可能会做dangerouslySetInnerHTML={{ __html: html }}

的文件