mdeck/index.html at master · dplabs/mdeck · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
<head>
  <title>mdeck demo</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="examples/styles/theme.css">
</head>
<body>
<textarea id="source" style="display:none">
class: center, middle

# mdeck

### Modern Markdown Slideshow

Powered by [markdown-it](https://github.com/markdown-it/markdown-it)

[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.
</textarea>
<script src="dist/mdeck.umd.cjs"></script>
<script>
  mdeck.createSlideshow();
</script>
</body>
</html>