diff --git a/docs/markdown.md b/docs/markdown.md
index 50048da..6d36506 100644
--- a/docs/markdown.md
+++ b/docs/markdown.md
@@ -65,6 +65,24 @@ Using code fences means that your example code will render in any standard markd
**Important Note**: To include custom components in scope for the live preview code fences,
you must use the `ScopeProvider` in a [custom App component](custom-app).
+#### MDX
+
+The LiveEditor also supports [MDX][] format. Use the `.mdx` language attribute to use MDX.
+
+````md
+```.mdx
+# Hello MDX
+
+
+```
+````
+
+```.mdx
+# Hello MDX
+
+
+```
+
### Live Preview
@@ -105,3 +123,4 @@ Front matter will be passed to the [HTML template](customizing) to allow control
[rr-link]: https://reacttraining.com/react-router/web/api/Link
[site]: https://compositor.io/x0/markdown
[fm]: https://github.com/jonschlinkert/gray-matter
+[MDX]: https://github.com/mdx-js/mdx
diff --git a/src/LiveEditor.js b/src/LiveEditor.js
index 69bf5bc..8d262b7 100644
--- a/src/LiveEditor.js
+++ b/src/LiveEditor.js
@@ -10,7 +10,6 @@ import { Box } from 'rebass'
import { color, borderColor } from 'styled-system'
import styled from 'styled-components'
import mdx from '@mdx-js/mdx'
-import { MDXTag } from '@mdx-js/tag'
const transformCode = src => `${src}`
const transformMdx = src => {
@@ -55,30 +54,26 @@ export default ({
scope = {},
render,
mdx
-}) => {
- const fullScope = { MDXTag, components: {}, ...scope }
-
- return (
-
-
- {scope => (
-
- {typeof render === 'function' ? (
- render({ code, fullScope })
- ) : (
-
-
-
-
-
- )}
-
- )}
-
-
- )
-}
+}) => (
+
+
+ {scope => (
+
+ {typeof render === 'function' ? (
+ render({ code, scope })
+ ) : (
+
+
+
+
+
+ )}
+
+ )}
+
+
+)
diff --git a/src/scope.js b/src/scope.js
index ce079b1..ca35429 100644
--- a/src/scope.js
+++ b/src/scope.js
@@ -2,6 +2,7 @@ import React from 'react'
import { withRouter, Link } from 'react-router-dom'
import rebassMarkdown from '@rebass/markdown'
import { Pre } from 'rebass'
+import { MDXTag } from '@mdx-js/tag'
import LiveEditor from './LiveEditor'
import LivePreview from './LivePreview'
@@ -67,16 +68,20 @@ export const code = ({
const pre = props => props.children
-const scope = rebassMarkdown({
- a: {
- is: link
- },
- code: {
- is: code
- },
- pre: {
- is: pre,
- }
-})
+const scope = {
+ MDXTag,
+ components: {}, // does mdx need this?
+ ...rebassMarkdown({
+ a: {
+ is: link
+ },
+ code: {
+ is: code
+ },
+ pre: {
+ is: pre,
+ }
+ })
+}
export default scope
diff --git a/test/components.js b/test/components.js
index adffd77..370653f 100644
--- a/test/components.js
+++ b/test/components.js
@@ -222,8 +222,11 @@ test('SidebarLayout renders', t => {
})
const blacklist = {
- pre: true
+ pre: true,
+ MDXTag: true,
+ components: true
}
+
Object.keys(scope)
.filter(key => !blacklist[key])
.forEach(key => {
diff --git a/test/snapshots/components.js.md b/test/snapshots/components.js.md
index 71f1a79..01247bd 100644
--- a/test/snapshots/components.js.md
+++ b/test/snapshots/components.js.md
@@ -37,7 +37,7 @@ Generated by [AVA](https://ava.li).
Hello
@@ -120,10 +120,10 @@ Generated by [AVA](https://ava.li).
className="sc-hEsumM dahmKO"
>
,
Snapshot 1
## scope.code renders
diff --git a/test/snapshots/components.js.snap b/test/snapshots/components.js.snap
index 32ff63a..bb21bfa 100644
Binary files a/test/snapshots/components.js.snap and b/test/snapshots/components.js.snap differ