**Building presentation slides with markdeep**
Acrobat Reader? I hardly know her!
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 ``.
See?
---
## Shortcuts
Press...
* Space, ↓, → or PgDn to go to the next slide,
* ↑, ← or PgUp to go to the previous slide,
* F, F5 or Esc to toggle fullscreen/presentation mode,
* . to turn the screen black (and back again),
* n to open a window with your presenter notes (more on the next slide),
* t to start (or dismiss) a timer shown in the presenter notes window, and
* a slide number, e.g. 17, followed by Enter, 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 n 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):
```
```
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 `<` and `>`.
---
### 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.