mdx-deck-live-code Demonstration 🤯

January 20, 2019 · View on GitHub

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 Demonstration 🤯

Live code JSX and Javascript with previews, directly in your slides

<LiveCode title="Customization" code={`

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' } }} />

<LiveCode code={`

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' } }} />

<LiveCode title={Smart handling of focus and arrow keys} code={`

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' } }} />

<LiveCode title="It even does React Functional Components, thanks to react-live" code={() => { const componentType = "Functional Component"; return (<p>Hi, I'm a {componentType}!</p>) }} editorProps={{ style: { fontSize: '0.5em', background: '#001628' } }} />

<LiveCode title="... and classes" code={class MyComp extends React.Component { constructor(){ this.state = { value: 'class' }; } render() { return ( <div> <p> This is a {this.state.value} component! </p> <input onChange={ (e) => this.setState({value: e.target.value}) } value={this.state.value} /> </div> ); } }} size="large" editorProps={{ style: { fontSize: '0.5em', background: '#001628' } }} />

<LiveCode title="In fact, it does anything react-live does!" code={const sayWhaaat = 'Hello'; const toWhooo = 'world!'; const GreetDaPeeps = () => ( <p> {sayWhaaat} {toWhooo} </p> ); render(GreetDaPeeps);} providerProps={{ noInline: true }} editorProps={{ style: { fontSize: '0.5em', background: '#001628' } }} />

🙋‍♀️

See more at the mdx-deck-live-code repository

By @DrReinhold