include prism as pre

Author: Laurie Barth

packages/gatsby-plugin-theme-ui/src/provider.js

@@ -1,17 +1,12 @@
 /** @jsx jsx */
-import {
-  jsx,
-  ThemeProvider,
-  merge
-} from 'theme-ui'
+import { jsx, ThemeProvider, merge } from 'theme-ui'
 import theme from './index'
 import components from './components'
 import useThemeUiConfig from './hooks/configOptions'
 
-
-const Root = ({children}) => {
+const Root = ({ children }) => {
   const themeUiConfig = useThemeUiConfig()
-  const {themeModule, themeModulePath, moduleExportName} = themeUiConfig
+  const { themeModule, themeModulePath, moduleExportName } = themeUiConfig
 
   let themeWrapper
   if (themeModule) {
@@ -21,25 +16,31 @@ const Root = ({children}) => {
   if (themeModulePath) {
     themeWrapper = themeModulePath
   }
-  
-  if(themeWrapper && (moduleExportName in themeWrapper)) {
+
+  if (themeWrapper && moduleExportName in themeWrapper) {
     themeWrapper = themeWrapper[moduleExportName]
   }
 
+  if (prismPreset) {
+    themeWrapper = merge(themeWrapper, {
+      styles: {
+        pre: {
+          ...prismPreset,
+        },
+      },
+    })
+  }
+
   themeWrapper = merge(themeWrapper, {
-    prism: prismPreset,
-    ...theme
+    ...theme,
   })
   return (
     <ThemeProvider theme={themeWrapper} components={components}>
-    {children}
+      {children}
     </ThemeProvider>
   )
 }
 
 export const wrapRootElement = ({ element }) => {
-  return (
-    <Root>{element}</Root>
-  )
+  return <Root>{element}</Root>
 }
-