-
Notifications
You must be signed in to change notification settings - Fork 12
/
demo.md.html
330 lines (227 loc) · 11.6 KB
/
demo.md.html
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
<meta charset="utf-8" lang="en">
**Building presentation slides with markdeep**
Acrobat Reader? I hardly know her!
<small><em><span class="current-date"></span></em></small><br>
Noah Doersing
---
# Getting started
---
## Setup
To start building your own slides with the help of Markdeep:
1. Clone this repository, or download a zipped version of it from https://github.com/doersino/markdeep-slides/archive/master.zip.
```bash
$ git clone https://github.com/doersino/markdeep-slides
```
2. Replace the contents of `demo.md.html` with whatever you want your slides to say, but keep the first line and the final lines intact; they're making the magic happen!
---
## Formatting
Use **horizontal lines to separate slides**:
```text
slide 1
---
slide 2
---
slide 3
```
If you want to use a horizontal line *on* one of your slides, write `<hr class="ignore">`.
<hr class="ignore">
See?
---
## Shortcuts
Press...
* <kbd>Space</kbd>, <kbd>↓</kbd>, <kbd>→</kbd> or <kbd>PgDn</kbd> to go to the next slide,
* <kbd>↑</kbd>, <kbd>←</kbd> or <kbd>PgUp</kbd> to go to the previous slide,
* <kbd>F</kbd>, <kbd>F5</kbd> or <kbd>Esc</kbd> to toggle fullscreen/presentation mode,
* <kbd>.</kbd> to turn the screen black (and back again),
* <kbd>n</kbd> to open a window with your presenter notes (more on the next slide),
* <kbd>t</kbd> to start (or dismiss) a timer shown in the presenter notes window, and
* a slide number, e.g. <kbd>1</kbd> <kbd>7</kbd>, followed by <kbd>Enter</kbd>, to jump to that slide.
These little presenter gadgets should work no problem.
---
>>> Presenter notes...
>>>
>>> * ...can contain lists!
>>> * How neat.
>>>
>>> You can use *arbitrary* Markdeep constructs in here (as long as they're allowed in blockquotes)!
>>>
>>> ![](screenshot.jpg style="width: 10rem")
## Presenter notes
Press <kbd>n</kbd> to open a **window with the presenter notes** and a basic clock. They will update as you move between slides. All **shortcuts work** even when the presenter notes window is focused.
Presenter notes **support Markdeep** and can be **defined using three nested blockquotes**, like so:
```text
>>> Don't just read what's *on* the slides out loud, that's boring.
>>> Here's some additional information:
>>> * A monad is just a monoid in the category of endofunctors.
```
In draft mode, presenter notes are shown below each slide.
---
## Printing to PDF
You can **export a PDF version** of your slides by simply **printing it to a PDF file** using your browser's built-in tools.
In my experience, this **works best in Chrome** as it respects the `@page` CSS selector properly.
!!!
In the print modal, set "Margins" to "None" and make sure to keep the "Background graphics" option enabled.
---
# Details
---
## Customization
Make sure to define your options *before* loading `markdeep-slides.js` (only some options shown here, `README.md` explains the rest):
```
<script>
markdeepSlidesOptions = {
aspectRatio: 16 / 9, // aspect ratio of your slides
theme: 'simple', // theme – "simple", "deepsea", "serif" or path of a stylesheet
fontSize: 28, // base font size, relative to slide display size
progressBar: true // show a presentation progress bar on each slide?
};
</script>
```
You can tweak the themes via CSS variables – take a look at their CSS files.
---
## Including media
Images should always be given a width, height, or both in `rem`:
```
![](screenshot.jpg style="height: 12rem")
```
Embedded videos can receive the same parameters.
!!! error: Important
If you specify width or height in `px`, your media **won't scale properly** based on your screen size – you don't want postage-stamp-sized images if you happen to present on a 4K screen, do you?
---
## Themeing
If your want to *build your own theme*, here are some helpful tips:
* Make sure that all `font-size`s, `margin`s, `padding`s, `width`s and `height`s are **defined in terms of `rem` or `em`**. This enables your elements to scale properly depending on screen size.
* Use CSS `var`iables to keep your theme configurable (take a look at the existing themes to see some examples).
* Keep in mind that the presenter notes will inherit your theme's styles.
* Download any webfonts to your computer. *You don't want to rely on wifi being available when and where you'll present – that's just asking for trouble.*
---
# Some neat Markdeep features
---
### Math:
$$
{\hat O_p} = \frac 1 {C_p} \sum_{{q \in \mathcal N_p}} {w(p, q)} {O_q}
$$
### Diagrams:
************************************************************
* A 1 2 4 8 *
* *----->o<---->o<----o-----------. ◍ *
* ^ ^ | ^ *
* | | | | *
* v | v | *
* ◌<--->*<---->o---->*---->o---->o<---->* *
* 3 B 5 C 6 7 D *
************************************************************
---
***************************************************************************
* ____ * *
* | |_____.---. | *
* o _____| )----------)-------. *
* / \ | '---' | __|__ *
* /___\ | | \ / *
* | '-------------. | \ / *
* A ----------------' | | o *
* .-------------------. o-----)-------' | *
* | |___.---. | |___.---. *
* B ---*---.__.---. ___| )--*--.__..---. ____) )----- Y *
* __| o----*--' '---' ______)) )---' '---' *
* C -------' '---' | | ''---' *
* | o *
* | / \ *
* | /___\ *
* | | *
* '--------------' *
***************************************************************************
Take a look at the [Markdeep docs](https://casual-effects.com/markdeep/features.md.html#basicformatting/diagrams) for more example diagrams.
---
### Quotes, endnotes[^test] and citations:
> This is a blockquote. It ain't much, but what did you expect? It's just a blockquote. Nothing more, nothing less.
>
If you wrap quotation marks around quotes, they get real fancy:
> "We make our world significant[^moretest] by the courage of our questions and by the depth of our answers."
>
> -- Carl Sagan [#Sagan80]
---
### Admonitions:
!!!
This is an admonition.
!!! error: Red admonition
Another one, but it's red. Must be danger ahead!
!!! warning: This is ~~America~~ a warning
Yellowish. Not quite as much danger, I guess.
!!! tip: Green
Now the 🚦 is complete.
---
### Code with line numbers and a caption:
```Haskell linenumbers
cgenExpr l (K.TElemR e1 e2 ty) = do
a <- cgenExpr l e1
b <- cgenExpr l e2
liput l b $ Right e2
b' <- toVoidPtr (K.typeOf e2) b
c <- callCbits voidPtr "kltollvm_row_elemr" [a, toOperand $ tyValueToC $ K.typeOf e2, b']
-- Make sure to return the correct value (previous function call returns a
-- void pointer).
fromVoidPtr ty c
```
[Listing [hask]: An out-of context piece of Haskell code.]
It's possible to reference listings: Consider Listing [hask].
---
In code, opening `<` and closing `>` angle brackets might be problematic if not followed by spaces, as indicated in the [Markdeep documentation](https://casual-effects.com/markdeep/features.md.html#basicformatting/codeblocks/less-thansignsincode).
!!!
This is caused by the browser parsing the Markdeep document before kicking off the Markdeep compilation process.
!!! tip: Solution
One solution is to use HTML entities `&lt;` and `&gt;`.
---
### Nested lists:
* You can...
* ...arbitrarily...
- ...nest...
- ...lists.
* This...
1. ...works with numbered...
2. ...lists...
1. ...too!
* You can also use pluses:
+ See!
- Minuses work too.
---
### Videos (images work too):
![Figure [fig:dave]: Better than most podcasts.](https://www.youtube.com/watch?v=ij9KXgiyDAc)
---
### Notes and references:
These have been defined a couple of slides further up.
[#Sagan80]: Sagan, C. (1980). Cosmos.
[^test]: This is an endnote.
[^moretest]: This is another endnote. It contains a lot of words: *Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.*
---
## Content that goes past the end of a slide is cut off, so be careful!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<!-- Markdeep slides stuff -->
<script>
markdeepSlidesOptions = {
aspectRatio: 16 / 9,
theme: 'simple',
fontSize: 28,
diagramZoom: 1.0,
totalSlideNumber: false,
progressBar: true,
breakOnHeadings: false,
slideChangeHook: (oldSlide, newSlide) => {},
modeChangeHook: (newMode) => {}
};
</script>
<link rel="stylesheet" href="markdeep-slides/lib/markdeep-relative-sizes/1.11/relativize.css">
<link rel="stylesheet" href="markdeep-slides/markdeep-slides.css">
<script src="markdeep-slides/markdeep-slides.js"></script>
<!-- Markdeep stuff -->
<script>
markdeepOptions = {
tocStyle: 'none',
detectMath: false,
onLoad: function() {
initSlides();
}
};
</script>
<style class="fallback">body{visibility:hidden;white-space:pre;font-family:monospace}</style>
<script src="markdeep-slides/lib/markdeep/1.11/markdeep.min.js" charset="utf-8"></script>
<script>window.alreadyProcessedMarkdeep||(document.body.style.visibility="visible")</script>