reactjs - 如何在 Gatsby react-live 代码块组件中重用 theme-ui 主题？

Question

我正在开发基于theme-ui-gatsby-plugin、 prism-react-renderer和react-live的 MDX 代码块组件。

考虑到呈现标签和组件呈现标签，重用相同语法突出显示主题react-live和组件的最佳方法是什么。react-prism-rendererreact-livepreprism-highlight<pre><code>

• 代码沙盒
• 语法高亮示例

System:
  OS: macOS 10.15.3
  CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Shell: 5.7.1 - /bin/zsh
Binaries:
  Node: 11.14.0 - ~/.nvm/versions/node/v11.14.0/bin/node
  Yarn: 1.19.2 - ~/.nvm/versions/node/v11.14.0/bin/yarn
  npm: 6.11.3 - ~/.nvm/versions/node/v11.14.0/bin/npm
Languages:
  Python: 2.7.16 - /usr/bin/python
Browsers:
  Chrome: 79.0.3945.130
  Firefox: 72.0.2
  Safari: 13.0.5
npmPackages:
  gatsby: ^2.19.12 => 2.19.12
  gatsby-image: ^2.2.39 => 2.2.40
  gatsby-plugin-mdx: ^1.0.67 => 1.0.70
  gatsby-plugin-react-helmet: ^3.1.21 => 3.1.22
  gatsby-plugin-sharp: ^2.3.13 => 2.4.5
  gatsby-plugin-theme-ui: ^0.3.0 => 0.3.0
  gatsby-remark-images: ^3.1.42 => 3.1.44
  gatsby-source-filesystem: ^2.1.46 => 2.1.48
  gatsby-transformer-sharp: ^2.3.13 => 2.3.14
npmGlobalPackages:
  gatsby-cli: 2.8.29
  gatsby: 2.5.7

相关： https ://github.com/system-ui/theme-ui/issues/212，https : //github.com/mdx-js/mdx/issues/702