mdeck demo

class: center, middle

# mdeck

### Modern Markdown Slideshow

[github.com/dplabs/mdeck](https://github.com/dplabs/mdeck)

---

# Features

- Markdown formatting, with smart extensions

- Presenter mode with notes and cloned view

- Syntax highlighting via **highlight.js**

- Slide scaling — consistent across all resolutions

- Touch support — swipe to navigate

---

# Slide syntax

Slides are separated by `---`:

```markdown
# Slide 1

Content here.

---

# Slide 2

More content.
```

---

# Content classes

Apply CSS classes to inline or block content:

```markdown
.center[This is centered]

.pull-left[
  Left column
]

.pull-right[
  Right column
]
```

---

# Code highlighting

```javascript
import { createSlideshow, markdownIt } from 'mdeck';

// Add a markdown-it plugin
markdownIt.use(myPlugin);

// Mount the slideshow
createSlideshow({ highlightStyle: 'monokai' });
```

???

Notes are written after `???` and shown in presenter mode.

Press **P** to toggle presenter mode.

---

# Presenter mode

Press **P** to open presenter mode:

- Current slide notes
- Preview of next slide
- Presentation timer

Press **C** to clone the slideshow in a new window.

---

# More examples

| Example | What it shows |
|---|---|
| [Controls & keymaps](examples/controls.html) | Every keyboard shortcut, mouse and touch gesture |
| [Advanced: custom markup](examples/advanced.html) | Content classes, CSS classes, markdown-it plugins, macros |
| [External Markdown file](examples/external.html) | Loading slides from a `.md` file via `sourceUrl` |
| [Inline source](examples/inline-source.html) | Passing Markdown directly as a `source` string |

---
class: center, middle

# That's it!

Press **h** for a full list of keyboard shortcuts.