Properly use MDX context components in react-live

syntax-highlighting.diff

diff --git a/src/components/CodeBlock.js b/src/components/CodeBlock.js
index 8b828d6..1751585 100644
--- a/src/components/CodeBlock.js
+++ b/src/components/CodeBlock.js
@@ -2,6 +2,7 @@
 
 import React from 'react'
 import Highlight, {defaultProps} from 'prism-react-renderer'
+import {mdx} from '@mdx-js/react'
 import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live'
 
 export default ({children, className, live, render}) => {
@@ -10,7 +11,11 @@ export default ({children, className, live, render}) => {
   if (live) {
     return (
       <div style={{marginTop: '40px', backgroundColor: 'black'}}>
-        <LiveProvider code={children.trim()}>
+        <LiveProvider
+          code={children.trim()}
+          transformCode={code => '/* @jsx mdx */' + code}
+          scope={{ mdx }}
+        >
           <LivePreview />
           <LiveEditor />
           <LiveError />
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
index e889171..90773bf 100644
--- a/src/pages/index.mdx
+++ b/src/pages/index.mdx
@@ -14,5 +14,5 @@ export default () => (
 ```
 
 ```js live=true
-<div style={{ backgroundColor: 'tomato', padding: '20px' }} />
+<h1>Hello!!!!!</h1>
 ```