diff --git a/components/MDX.js b/components/MDX.js
index d8cc79bf90e..6d0e0c0761b 100644
--- a/components/MDX.js
+++ b/components/MDX.js
@@ -60,7 +60,7 @@ export function getMDXComponents() {
     th: props => <th {...props} className={`${props.className || ''} px-6 py-3 border-b border-gray-200 bg-gray-100 text-left text-xs leading-4 font-medium font-body text-gray-900 uppercase tracking-wider`} />,
     tr: props => <tr {...props} className={`${props.className || ''} bg-white`} />,
     td: props => <td {...props} className={`${props.className || ''} px-6 py-4 border-b border-gray-200 text-sm leading-5 text-gray-700 tracking-tight`} />,
-    pre: CodeComponent,
+    pre: PreComponent,
     code:  props => <code {...props} className={`${props.className || ''} px-1 py-0.5 bg-gray-200 text-gray-800 rounded font-mono text-sm`} />,
     hr: props => <hr {...props} className={`${props.className || ''} my-8`} />,
     CodeBlock,
@@ -91,11 +91,16 @@ export function getMDXComponents() {
   }
 }
 
-function CodeComponent({ children, className, ...rest }) {
-  if (!children || !children.props || !children.type || children.type.name !== 'code') return <pre {...rest} className={`${className || ''} my-8`} />
-  let metastring = children.props.metastring || ''
-  className= children.props.className || ''
-  children = children.props.children
+function PreComponent(props){
+  if (props.children && props.children.type.name === 'code'){
+    return CodeComponent(props.children.props)
+  }
+  return (
+    <div {...props} className={`${props.className || ''} my-8`} />
+  )
+}
+
+function CodeComponent({ children, className = '', metastring = '', ...rest }) {
   let caption
   const meta = metastring.split(/([\w]+=[\w\d\s\-_:><.]+)/) || []
   meta.forEach(str => {