在 Gatsby 的生产构建中突出显示 prism-react-renderer 的问题答案

【问题标题】：Issue with prism-react-renderer highlighting in production build in Gatsby在 Gatsby 的生产构建中突出显示 prism-react-renderer 的问题
【发布时间】：2021-01-10 23:42:41
【问题描述】：

在 Gatsby 中使用 prism-react-renderer 组件时，我遇到了代码高亮问题。我已经按照FormidableLabs/prism-react-renderer中的说明进行了配置。

一切都在开发模式下工作，但是当我使用gatsby build 命令构建生产版本时，pre 标记没有用棱镜类修饰（缺少class="prism-code language-python"）。我的猜测是生产版本不包含正确的组件或 CSS，但我不知道从哪里开始寻找。

此外，当我在 7-8 个月前在另一个项目中使用相同的代码时，不存在此问题。所以这可能是过去几个月因为插件/组件更新而引入的问题。

附上两张截图——一张是gatsby develop，另一张是gatsby build。

我运行的命令来设置和安装必需品：

> gatsby new test-mdx-prism-rendering https://github.com/gatsbyjs/gatsby-starter-hello-world
> npm install --save gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react
> npm install --save mdx-utils
> npm install --save prism-react-renderer

示例 GitHub 项目位于 subhashb/test-mdx-prism-rendering

【问题讨论】：

标签： reactjs gatsby prismjs prism-react-renderer

【解决方案1】：

在我试图深入挖掘时找到了答案。

这里讨论了解决方法：https://github.com/ChristopherBiscardi/gatsby-mdx/issues/394

显然，gatsby-browser.js 中定义的wrapRootElement 也应该在gatsby-ssr.js 中可用。

【讨论】：