Поддержка верхнего и нижнего индексов gatsby-plugin-mdx

Question

У меня проблемы с получением некоторых 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",

У кого-нибудь есть идеи относительно того, что я здесь делаю неправильно?

Answer 1

Проблема действительно заключалась в форматировании HTML, подаваемого на gatsby-plugin-mdx.

Очевидно, <img /> теги должны быть закрыты. После закрытия тегов изображений мне нужно было go в файлы уценки, которые выдавали ошибки, и проверить HTML вручную. Так как этот контент пришел из WordPress, некоторые форматирования были немного проблематичными c. Например, это:

<blockquote>How
you
doin</blockquote>

станет таким после запуска через процессор Markdown:

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