Use MDXProvider components approach

gatsby-config.js

@@ -70,9 +70,6 @@ module.exports = {
               wrapperStyle: 'margin-bottom: 1.0725rem',
             },
           },
-          {
-            resolve: 'gatsby-remark-prismjs',
-          },
           {
             resolve: 'gatsby-remark-copy-linked-files',
           },
@@ -121,8 +118,8 @@ module.exports = {
         feeds: [
           {
             query: `
-            {
-              allMdx(
+        {
+          allMdx(
                 sort: {
                   order: DESC,
                   fields: [frontmatter___date]

gatsby-node.js

@@ -1,5 +1,4 @@
 const path = require('path')
-const componentWithMDXScope = require('gatsby-mdx/component-with-mdx-scope')
 
 // Create slugs for files.
 exports.onCreateNode = ({node, actions}) => {
@@ -65,10 +64,7 @@ exports.createPages = async ({graphql, actions}) => {
 
     createPage({
       path: slug,
-      component: componentWithMDXScope(
-        path.resolve(`./src/templates/${layout || 'post'}.tsx`),
-        scope,
-      ),
+      component: path.resolve(`./src/templates/${layout || 'post'}.tsx`),
       context: {
         slug,
         id,

package.json

@@ -29,8 +29,8 @@
     "@babel/preset-react": "7.0.0",
     "@babel/preset-typescript": "7.3.3",
     "@emotion/core": "10.0.7",
-    "@mdx-js/loader": "0.18.2",
-    "@mdx-js/mdx": "0.16.0",
+    "@mdx-js/mdx": "0.20.1",
+    "@mdx-js/tag": "0.18.0",
     "@types/aws-lambda": "8.10.20",
     "@types/node": "10.12.29",
     "@types/react": "16.8.6",
@@ -39,7 +39,7 @@
     "babel-plugin-styled-components": "1.10.0",
     "colors.css": "3.0.0",
     "gatsby": "2.1.19",
-    "gatsby-mdx": "0.2.0",
+    "gatsby-mdx": "0.4.0",
     "gatsby-plugin-emotion": "4.0.4",
     "gatsby-plugin-feed": "2.0.14",
     "gatsby-plugin-netlify": "2.0.11",
@@ -49,13 +49,14 @@
     "gatsby-plugin-twitter": "2.0.9",
     "gatsby-plugin-typescript": "2.0.9",
     "gatsby-remark-copy-linked-files": "2.0.9",
-    "gatsby-remark-prismjs": "3.2.4",
     "gatsby-remark-responsive-iframe": "2.0.9",
     "gatsby-remark-smartypants": "2.0.8",
     "gatsby-source-filesystem": "2.0.23",
     "http-proxy-middleware": "0.19.1",
+    "mdx-utils": "0.0.2",
     "netlify-lambda": "1.4.2",
     "npm-run-all": "4.1.5",
+    "prism-react-renderer": "0.1.6",
     "prism-themes": "1.0.1",
     "prismjs": "1.15.0",
     "ramda": "0.26.1",

src/components/Layout/index.tsx

@@ -1,11 +1,15 @@
 import * as React from 'react'
+import {MDXProvider} from '@mdx-js/tag'
+import MdxComponents from '../mdx'
 
 export interface Props {
   children: React.ReactNode
 }
 
 const Layout = ({children}: Props) => (
-  <div css={{padding: '3% 6%'}}>{children}</div>
+  <MDXProvider components={MdxComponents}>
+    <div css={{padding: '3% 6%'}}>{children}</div>
+  </MDXProvider>
 )
 
 export default Layout

src/components/mdx/Code.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react'
+import {css} from '@emotion/core'
+import Highlight, {defaultProps} from 'prism-react-renderer'
+
+interface Props {
+  codeString: string
+  language: string
+}
+
+interface InnerProps {
+  className: string
+  style: Object
+  tokens: Array<Array<unknown>>
+  getLineProps: (Object: {line: unknown[]; key: any}) => Object
+  getTokenProps: (Object: {token: unknown; key: any}) => Object
+}
+
+export default function Code({codeString, language}: Props) {
+  return (
+    <Highlight
+      {...defaultProps}
+      code={codeString}
+      language={language}
+      // to be able to use normal CSS Prism themes
+      // https://www.npmjs.com/package/prism-react-renderer#faq
+      theme={undefined}
+    >
+      {({
+        className,
+        style,
+        tokens,
+        getLineProps,
+        getTokenProps,
+      }: InnerProps) => (
+        <pre className={className} style={style}>
+          <code>
+            {tokens.map((line, i) => (
+              <div {...getLineProps({line, key: i})}>
+                <span
+                  css={css`
+                    display: inline-block;
+                    width: 1.5em;
+                    text-align: right;
+                    margin-right: 1rem;
+                    user-select: none;
+                    opacity: 0.3;
+                  `}
+                >
+                  {i + 1}
+                </span>
+                {line.map((token, key) => (
+                  <span {...getTokenProps({token, key})} />
+                ))}
+              </div>
+            ))}
+          </code>
+        </pre>
+      )}
+    </Highlight>
+  )
+}

src/components/mdx/index.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+import {preToCodeBlock} from 'mdx-utils'
+import Code from './Code'
+
+export default {
+  pre: (preProps: Object) => {
+    const props = preToCodeBlock(preProps)
+    // if there's a codeString and some props, we passed the test
+    if (props) {
+      return <Code {...props} />
+    } else {
+      // it's possible to have a pre without a code in it
+      return <pre {...preProps} />
+    }
+  },
+}

src/templates/post.tsx

@@ -2,7 +2,6 @@ import * as React from 'react'
 import colors from 'colors.css'
 import {graphql} from 'gatsby'
 import MDXRenderer from 'gatsby-mdx/mdx-renderer'
-import {MDXProvider} from '@mdx-js/tag'
 import Meta from '../components/Meta'
 import Back from '../components/Back'
 import Layout from '../components/Layout'
@@ -56,42 +55,40 @@ export default function Post(props /*: Props*/) {
 
   return (
     <Layout>
-      <MDXProvider components={{}}>
-        <div css={{maxWidth: '45rem'}}>
-          <Meta
-            title={`${title} | ${author} - ${siteTitle}`}
-            excerpt={excerpt}
-            url={postUrl}
-            post
-          />
-          <div css={{borderBottom: '1px solid rgba(0, 0, 0, 0.1)'}}>
-            <Back />
-            <time
-              css={{
-                fontStyle: 'italic',
-                fontSize: '0.75rem',
-                color: colors.gray,
-                display: 'block',
-              }}
-              datatime={date}
-            >
-              On {date}
-            </time>
-            <h1>{title}</h1>
-            <MDXRenderer>{data.mdx.code.body}</MDXRenderer>
-          </div>
-          <div
+      <div css={{maxWidth: '45rem'}}>
+        <Meta
+          title={`${title} | ${author} - ${siteTitle}`}
+          excerpt={excerpt}
+          url={postUrl}
+          post
+        />
+        <div css={{borderBottom: '1px solid rgba(0, 0, 0, 0.1)'}}>
+          <Back />
+          <time
             css={{
-              marginBottom: '1rem',
-              paddingBottom: '1rem',
-              paddingTop: '1rem',
+              fontStyle: 'italic',
+              fontSize: '0.75rem',
+              color: colors.gray,
+              display: 'block',
             }}
+            datatime={date}
           >
-            <TweetButton via={display} title={title} url={postUrl} />
-          </div>
-          <Footer author={author} />
+            On {date}
+          </time>
+          <h1>{title}</h1>
+          <MDXRenderer>{data.mdx.code.body}</MDXRenderer>
         </div>
-      </MDXProvider>
+        <div
+          css={{
+            marginBottom: '1rem',
+            paddingBottom: '1rem',
+            paddingTop: '1rem',
+          }}
+        >
+          <TweetButton via={display} title={title} url={postUrl} />
+        </div>
+        <Footer author={author} />
+      </div>
     </Layout>
   )
 }

src/typings.d.ts

@@ -8,6 +8,8 @@
 // declare module "*.png"
 
 declare module 'colors.css'
+declare module 'prism-react-renderer'
+declare module 'mdx-utils'
 
 declare module '*.png'
 declare module '*.svg'