Permalink
Fetching contributors…
Cannot retrieve contributors at this time
29 lines (24 sloc) 692 Bytes
---
title: "Interactive Code Blocks"
---
To make every markdown code block an editable live example, you can pass in a
custom `code` element to MDXProvider.
```javascript
import React, {Component} from "react";
import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
import { MDXProvider } from '@mdx-js/tag'
const MyCodeComponent = ({ children, ...props }) => (
<LiveProvider code={children}>
<LiveEditor />
<LiveError />
<LivePreview />
</LiveProvider>
);
export default MyPageLayout extends Component {
render() {
return <MDXProvider components={{code: MyCodeComponent}}>
<div>{this.props.children}</div>
</MDXProvider>
}
}
```