React Live for fenced code blocks in MDX
npm install mdx-liveAdd live code examples to MDX with [react-live][]
``sh`
npm i mdx-live
`jsx
import React from 'react'
import { MDXLiveProvider } from 'mdx-live'
import Doc from './doc.mdx'
export default props =>
`
Higher order component to render LiveCode component when the language-.jsx class name is present.
`js
import { withMDXLive } from 'mdx-go'
const components = {
code: withMDXLive('pre'),
// removes wrapping
tag from MDX
pre: props => props.children,
}
``LiveCode
Styled wrapper around [react-live][]
js`
import { LiveCode } from 'mdx-go'`jsx`scope={{
name: 'Jane'
}}
code='Hello {name}
'
/>previewStyleProps
-
editorStyle
-errorStyle
-previewProps
-editorProps
-errorProps
-components
-scope`
-[react-live]: https://github.com/FormidableLabs/react-live