gatsby插件mdx上标和下标支持

Question

我在获取一些HTML元素(如<sup>和<sub>(以使用gatsby-plugin-mdx时遇到问题。

我在gatsby插件mdx文档中找到了以下代码。您可以向gatsby插件mdx添加本地注释插件，如下所示：

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

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

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

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的HTML的格式问题。

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

<blockquote>How
you
doin</blockquote>

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

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