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

【问题标题】：gatsby-plugin-mdx superscript and subscript supportgatsby-plugin-mdx 上标和下标支持
【发布时间】：2020-06-04 03:54:54
【问题描述】：

我无法让 <sup> 和 <sub> 等一些 HTML 元素与 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",

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

【问题讨论】：

检查组件中未闭合的标签。
作为背景知识，我正在将 WordPress 中的页面大量导出到 Markdown 文件中。所以每个 Markdown 文件都是由有效的 HTML 组成的。可以肯定的是，我通过部分 HTML 验证器运行了一些我看到这些错误的页面，并且它们已检出。我还手动检查了它们是否有未关闭的标签，但找不到。
此外，在 ¹ 上方的错误日志中，格式也变得一团糟。在 github 格式的版本中，你真的看不到乱七八糟的东西。

标签： gatsby

【解决方案1】：

问题确实是提供给gatsby-plugin-mdx 的HTML 格式。

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

<blockquote>How
you
doin</blockquote>

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

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

【讨论】：