diff --git a/packages/gatsby-theme-blog/src/gatsby-plugin-theme-ui/components.js b/packages/gatsby-theme-blog/src/gatsby-plugin-theme-ui/components.js
new file mode 100644
index 0000000000000..4f2d235bd25d9
--- /dev/null
+++ b/packages/gatsby-theme-blog/src/gatsby-plugin-theme-ui/components.js
@@ -0,0 +1,28 @@
+/** @jsx jsx */
+
+import { jsx } from "theme-ui"
+import { preToCodeBlock } from "mdx-utils"
+import PrismCodeBlock from "@theme-ui/prism"
+
+import headings from "../components/headings"
+
+const CodeBlock = preProps => {
+  const props = preToCodeBlock(preProps)
+
+  if (props) {
+    const { codeString, ...restProps } = props
+
+    return (
+      <div sx={{ mb: 2 }}>
+        <PrismCodeBlock {...restProps}>{codeString}</PrismCodeBlock>
+      </div>
+    )
+  } else {
+    return <pre {...preProps} />
+  }
+}
+
+export default {
+  pre: CodeBlock,
+  ...headings,
+}