import { Head } from 'mdx-deck'; export { default as theme } from './theme'; import { LiveCode } from 'mdx-deck-live-code'; mdx-deck-live-code demo # [mdx-deck-live-code](https://github.com/jreinhold/mdx-deck-live-code) Demonstration 🤯 Live code JSX and Javascript with previews, directly in your slides --- --- --- --- --- --- You can style your {""} individually per slide, targeting each element directly: 
{\`\`}
`} size="large" previewProps={{ style: { textAlign: 'left', padding: '0.5em', fontSize: '0.7em' }, }} editorProps={{ style: { fontSize: '0.5em', background: '#001628' } }} /> --- Or you can use the global mdx-deck theme: 
{\`export default {
  ...theme,
  liveCode: {
    container: {
      // container styles
    },
    editor: {
      // editor styles
    },
    preview: {
      // preview styles
    },
    error: {
      // error styles
    }
  }
};\`}
`} size="fullscreen" previewProps={{ style: { textAlign: 'left', padding: '0.5em', fontSize: '0.7em' }, }} editorProps={{ style: { fontSize: '0.5em' } }} /> ---

While in the editor, use either one of the key combos

  • ESC
  • CTRL + M (Windows and Linux)
  • CTRL + SHIFT + M (Mac)
To unfocus the editor, and navigate the deck again `} size="large" previewProps={{ style: { textAlign: 'left', padding: '0.5em', fontSize: '0.7em' }, }} editorProps={{ style: { fontSize: '0.5em', background: '#001628' } }} /> --- { const componentType = "Functional Component"; return (

Hi, I'm a {componentType}!

) }`} editorProps={{ style: { fontSize: '0.5em', background: '#001628' } }} /> ---

This is a {this.state.value} component!

this.setState({value: e.target.value}) } value={this.state.value} /> ); } }`} size="large" editorProps={{ style: { fontSize: '0.5em', background: '#001628' } }} /> --- (

{sayWhaaat} {toWhooo}

); render(GreetDaPeeps);`} providerProps={{ noInline: true }} editorProps={{ style: { fontSize: '0.5em', background: '#001628' } }} /> --- --- # 🙋‍♀️ ### See more at the [mdx-deck-live-code repository](https://github.com/jreinhold/mdx-deck-live-code) By [@DrReinhold](https://twitter.com/drreinhold)