当html和<code>块包含在dangerouslySetInnerHTML中时，如何在Gatsby中使用PrismJS？

npm install gatsby gatsby-transformer-remark gatsby-plugin-prismjs prismjs

{
  resolve: `gatsby-plugin-prismjs`,
  options: {
    classPrefix: "language-",
    inlineCodeMarker: null,
    aliases: {},
    showLineNumbers: false,
    noInlineHighlight: false,
    languageExtensions: [
      {
        language: "superscript",
        extend: "javascript",
        definition: {
          superscript_types: /(SuperType)/,
        },
        insertBefore: {
          function: {
            superscript_keywords: /(superif|superelse)/,
          },
        },
      },
    ],
    prompt: {
      user: "root",
      host: "localhost",
      global: false,
    },
    escapeEntities: {},
  },
},

import React, { useEffect } from "react"
import { Helmet } from "react-helmet"
import Prism from "prismjs"
import "prismjs/themes/prism.css"

const YourComponent = () => {
  useEffect(() => {
    Prism.highlightAll()
  }, [])

  return (
    <>
      <Helmet>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-core.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/autoloader/prism-autoloader.min.js"></script>
      </Helmet>
      <div dangerouslySetInnerHTML={{ __html: yourHTMLContent }} />
    </>
  )
}

export default YourComponent