mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-11-30 00:44:20 +03:00
96 lines
1.3 KiB
Plaintext
96 lines
1.3 KiB
Plaintext
export { default as theme } from './theme'
|
||
import { Image, Notes, Appear, Code } 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
|
||
|
||
---
|
||
|
||
## Code Examples
|
||
|
||
```jsx
|
||
/* JavaScript example */
|
||
const foo = a => a * a;
|
||
|
||
function bar(a) {
|
||
return a * a;
|
||
}
|
||
```
|
||
|
||
```jsx
|
||
<div>Some JSX</div>
|
||
```
|
||
|
||
---
|
||
|
||
### Appear
|
||
|
||
<ul>
|
||
<Appear>
|
||
<li>One</li>
|
||
<li>Two</li>
|
||
<li>Three</li>
|
||
<li>Four</li>
|
||
</Appear>
|
||
</ul>
|
||
---
|
||
|
||
## 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)
|