mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-11-30 00:44:20 +03:00
76 lines
1.2 KiB
Plaintext
76 lines
1.2 KiB
Plaintext
export { future as theme } from '../src/themes'
|
||
import { Image, Notes, FragmentBlock } from '../src'
|
||
import Layout from './Layout'
|
||
|
||
# mdx-deck
|
||
|
||
MDX-based presention decks
|
||
---
|
||
# Presentation decks
|
||
---
|
||
# Built with [MDX][]
|
||
[MDX]: https://github.com/mdx-js/mdx
|
||
---
|
||
import Box from 'superbox'
|
||
|
||
<Box
|
||
fontSize={3}
|
||
p={4}
|
||
bg='magenta'>
|
||
Import React components
|
||
</Box>
|
||
---
|
||
|
||
- Make bulleted lists
|
||
- To help make your point
|
||
|
||
---
|
||
# 4 reasons to use Reason
|
||
|
||
<FragmentBlock>
|
||
<div>Based on OCaml</div>
|
||
<div>Types</div>
|
||
<span>Community</span>
|
||
<div className="some-effects">Interop</div>
|
||
</FragmentBlock>
|
||
---
|
||
|
||
## Getting Started
|
||
|
||
1. `npm i -D mdx-deck`
|
||
2. Write some markdown and JSX
|
||
3. Present
|
||
|
||
---
|
||
|
||
```
|
||
<button>code example</button>
|
||
```
|
||
|
||
```notes
|
||
- These are speaker notes
|
||
- And they won't rendered in your slide
|
||
```
|
||
|
||
---
|
||
> “Blockquotes are essential to any good presentation”
|
||
|
||
– Anonymous
|
||
|
||
<Notes>
|
||
<ul>
|
||
<li>Speaker notes can also be</li>
|
||
<li>Written in JSX</li>
|
||
</ul>
|
||
</Notes>
|
||
|
||
---
|
||
|
||
<Image src='https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20' />
|
||
|
||
---
|
||
export default Layout
|
||
|
||
# Get started :sunglasses:
|
||
[GitHub](https://github.com/jxnblk/mdx-deck)
|