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

Question

我在让一些像<sup>和<sub>这样的超文本标记语言元素与gatsby-plugin-mdx一起工作时遇到了麻烦。

我在gatsby-plugin-mdx文档中找到了以下代码。你可以像这样向gatsby-plugin-mdx添加原生的remark插件：

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",

有没有人知道我做错了什么？

Answer 1

问题确实出在提供给gatsby-plugin-mdx的超文本标记语言的格式上。

显然，<img />标签需要关闭。在关闭图像标记之后，我需要进入抛出错误的markdown文件，并手动检查HTML。因为这些内容来自WordPress，所以一些格式有点问题。例如，如下所示：

<blockquote>How
you
doin</blockquote>

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

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