import {Note} from './_component/note.server.js'
import {Editor} from './_component/editor.client.js'
export const navSortSelf = 5
export const info = {
  author: [
    {name: 'John Otander', github: 'johno', twitter: '4lpine'},
    {name: 'Titus Wormer', github: 'wooorm', twitter: 'wooorm'}
  ],
  published: new Date('2021-09-13'),
  modified: new Date('2021-11-01')
}
export const playgroundSource = `Hello, world!
Below is an example of markdown in JSX.

<div style={{padding: '1rem', backgroundColor: 'violet'}}>
  Try and change the background color to \`tomato\`.
</div>`

# Playground

Here you can play with the MDX format.
Write some MDX to find out what it turns into. {/* more */}
You can see the rendered result, the generated code, and the intermediary
ASTs.
This can be helpful for debugging or exploring.
To read about how the MDX format works, we recommend that you start with
[§ What is MDX][what].

<Editor children={playgroundSource} />

[what]: /docs/what-is-mdx/
