LiveCode

The LiveCode component is primarily used to convert fenced code blocks to live code previews when using the .jsx language attribute. It's a wrapper around react-live and can be used outside of MDX.

To enable LiveCode in fenced code blocks, use either the ComponentProvider or StyleProvider in a Root component.

// example Root component
import React from 'react'
import { ComponentProvider } from 'mdx-go'

export const Root = props =>
  <ComponentProvider>
    {props.children}
  </ComponentProvider>

Once the LiveCode component is provided to MDX, use the .jsx language attribute to enable an editable preview of the code block.

```.jsx
<h2>LiveCode example</h2>
```

The fenced code block above will render as seen below:

<h2>LiveCode example</h2>

Component Scope

To add components to scope for use within the LiveCode component's code blocks, pass a components prop to the ComponentProvider.

// example Root component
import React from 'react'
import { ComponentProvider } from 'mdx-go'
import Button from '../src/Button'

const components = {
  Button
}

export const Root = props =>
  <ComponentProvider components={components}>
    {props.children}
  </ComponentProvider>

With the setup above, the Button component will now be in scope for code blocks.

```.jsx
<Button>Button</Button>
```

Theming

Use a ThemeProvider or the StyleProvider to pass a theme to the LiveCode component.

// example Root component
import React from 'react'
import { StyleProvider } from 'mdx-go'

const theme = {
  LiveCode: {
    borderColor: 'tomato',
    borderRadius: '4px'
  },
  LiveEditor: {
    color: 'magenta',
    backgroundColor: 'black'
  }
}

export const Root = props =>
  <StyleProvider theme={theme}>
    {props.children}
  </StyleProvider>