时间戳

首页 > 解决方案 > gatsby-plugin-mdx 上标和下标支持

gatsby - gatsby-plugin-mdx 上标和下标支持

问题描述

我在获取一些 HTML 元素时遇到了麻烦<sup>，<sub>例如gatsby-plugin-mdx.

我在 gatsby-plugin-mdx 文档中找到了以下代码。您可以像这样将本机备注插件添加到 gatsby-plugin-mdx：

https://www.gatsbyjs.org/packages/gatsby-plugin-mdx/#md-plugins

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        remarkPlugins: [require("remark-abbr")],
      },
    },
  ],
}

沿着这些思路，我添加remark-sub-super到我的项目中并将其放入我的 gatsby-config 中，如下所示：

const remarkSubSuper = require('remark-sub-super');
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
        remarkPlugins: [remarkSubSuper],
    },
  ],
}

尽管如此，我仍然看到一些看起来<sup>与<sub>标签有关的错误。

"gatsby-plugin-mdx" threw an error while running the onCreateNode lifecycle:

unknown: Unterminated JSX contents (17:16)

  15 | <em><sup>1 </sup>https://example.com/</em>
  16 | <em><sup>2 </sup>https://example.com/</em>
> 17 |     </MDXLayout>
     |                 ^
  18 |   )
  19 | };
  20 | MDXContent.isMDXComponent = true/<PATH>: unknown: Unterminated JSX contents (17:16)

  15 | <em><sup>1 </sup>https://example.com/</em>
  16 | <em><sup>2 </sup>https://example.com/</em>
> 17 |     </MDXLayout>
     |                 ^
  18 |   )
  19 | };
  20 | MDXContent.isMDXComponent = true

一些版本信息：

"gatsby": "^2.19.18",
"gatsby-plugin-mdx": "^1.0.73",
"remark-sub-super": "^1.0.19",

有谁知道我在这里做错了什么？

标签： gatsby

解决方案

问题确实是提供给gatsby-plugin-mdx.

显然<img />标签需要关闭。关闭图像标签后，我需要进入引发错误的降价文件并手动检查 HTML。由于此内容来自 WordPress，因此某些格式有点问题。例如，这个：

<blockquote>How
you
doin</blockquote>

运行 Markdown 处理器后会变成这样：

<blockquote>How
<p>you</p>
<p>doin</blockquote></p>

推荐阅读