HackMD integrates reveal.js so we can easily make a deck of presentation slides within a markdown note.
Here's a quick tutorial to get started.
It takes three lines to separate slides: an empty line, three dashes, and another empty line.
Hint
The most common mistake in making a slide deck is overlooking the empty lines either before the dashes or after the dashes. We need both empty lines to separate the slides!
Observe this example closely: Slide-example
We can choose Slide Mode from the "Mode" dropdown (by default showing View Mode) in the sharing menu at top right corner, and hit "Preview" to see your slide.
When we are in the slide mode, we can press the Esc on the keyboard and we will see the overview of all slides.
We can then use the arrow key to select which slide we want to jump to before hitting Enter or Return.
When we are in the slide mode, we can press the S key on the keyboard and we will see a pop-up speaker window, which shows the next slide and time we've spent.
Sectioning allows us to skip or dive into some slides without breaking the flow. For example, if you are presenting with the slide-example, you can skip (or dive into) the section of the first slide, depending on your time remaining and your audience (see below image).
With an empty line, four dashes, and another empty line.
So how do we make a section?
Take the session down there for example:
You can create section slides with an empty line, four dashes, and another empty line.
Regular slides are separated by a leading <empty line> --- <empty line>
and section slides by a leading <empty line> ---- <empty line>
.
You can preview slides in Both Mode, which boosts your productivity even further.
Put type: slide
in the YAML metadata section at the beginning of the note to toggle Slides Preview on:
Then, you can preview slides in Both Mode:
Scroll the page to the bottom in slide mode, you can find the print icon like this :
Click on it to enter Printing mode, and use browser built-in Print to PDF feature to export your slides.
We can customize the slide options from the Share menu → Customize slides.
For example:
make sure to have two spaces only at the start of the listed slide options.
As in all yaml header, we can comment out options with a #
.
custom background image:
Forgot your laser pointer at home, or cannot use a pointer in an online meeting? Enable the spotlight mode in YAML frontmatter like below:
When the spotlight is enabled, hold your mouse left key will keep the spotlight on.
Hint
When spotlight is on, you need to use arrow keys to navigate slides.
Want to keep track of the time without constantly checking your watch?
Enable the slide timer in YAML frontmatter:
A red progress bar will be shown above the blue progress bar, which indicates the elapsed time. You can track progress by it in your presentation.