This is a presentation given at SEM.js 11/2018.
Creating presentations using MDX-Deck & Code-Surfer. Includes a the informational deck and the demo deck. An additional how-to guide on theming mdx-decks is included in the theming guide.
A live stream is also shared on the SEMjs Youtube channel (35-ish min)
Wnat to know more about SEMjs, visit:
Table of Contents
git clone # or download a zip
npm i # install depedenciesnpm start # run the presentation
npm run demo # run the demoThis information is a summation of documentation scattered across different projects. Included here as a quick reference.
See also the included how-to document
| Key | Description |
|---|---|
| Left Arrow | Go to previous slide (or step in [Appear][]) |
| Right Arrow | Go to next slide (or step in [Appear][]) |
| Space | Go to next slide (or step in [Appear][]) |
| Up Arrow | Hide current step in [Appear][] component without navigating slides |
| Down Arrow | Show next step in [Appear][] component without navigating slides |
| Option + P | Toggle Presenter Mode |
| Option + O | Toggle Overview Mode |
| Option + G | Toggle grid view mode |
| Key | Description |
|---|---|
| Option + P | Toggle Presenter Mode |
| Option + O | Toggle Overview Mode |
| Option + G | Toggle grid view mode |
Speaker notes can be included on decks using the following markdown code block syntax:
```notes
These are only visible in presenter mode.
Styled with markdown syntax.
```
A <Notes> component is also available if you want more flexibility with the display of your notes. Render notes according to your custom markdup and css!
Use by opening a second browser window pressing the Option + P (Alt + P) key to enter presenter mode and view speaker notes
- mdx
- mdx-deck
- mdx > original specification
- mdx > language and AST definitions
- code-surfer
- Theming Guide for more complex theming & customizations
Other Slide-share Libraries