export { future as theme } from '../themes'
import { Head, Image, Notes, Appear } from '../dist'
import { Invert, Split, FullScreenCode, Horizontal} from '../layouts'
import Counter from './Counter'
import code from './code'
mdx-deck
# mdx-deck
MDX-based presention decks
---
# Presentation decks
---
# Built with [MDX][]
[MDX]: https://github.com/mdx-js/mdx
---
import Box from 'superbox'
Import React components
---
- Make bulleted lists
- To help make your point
---
## Getting Started
1. `npm i -D mdx-deck`
2. Write some markdown and JSX
3. Present
---
```jsx
```
```notes
- These are speaker notes
- And they won't be rendered in your slide
```
---
```jsx
class extends React.Component {
render () {
return (
Indented code
)
}
}
```
---
> “Blockquotes are essential to any good presentation”
– Anonymous
Speaker notes can also be
Written in JSX
---
### Appear
One
Two
Three
Four
---
```notes
Testing object fit
```
---
### Real React Components
---
---
export default Split
## Split Layout
---
export default Horizontal
## Horizontal Layout
## As many columns as you want
---
export default Invert
# Invert Layout
---
export default FullScreenCode
```
```
---
Inline image
---
Prop | Type | Description
---|---|---
`width` | number, string, or array | sets element width
`color` | string | sets foreground color
`bg` | string | sets background color
---
export default Invert
# Get started :sunglasses:
[GitHub](https://github.com/jxnblk/mdx-deck)