I'm working on MDX code block component based on theme-ui-gatsby-plugin, prism-react-renderer and react-live.
What's the best way to reuse the same syntax highlighting theme for react-live and react-prism-renderer components taking into account that react-live renders pre tag
and prism-highlight component renders <pre><code> tags.
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
Related: https://github.com/system-ui/theme-ui/issues/212, https://github.com/mdx-js/mdx/issues/702