Make Presentation Slides with HackMD

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.

Separating Slides

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

Slide Modes

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.

Overview Mode

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.

Speaker Mode

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

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>.

# Ch 1
text

---

# Ch 2
text

----

## Ch 2.1
text

----

## Ch 2.2
text

---

# Ch 3
text

Preview slides in Both Mode

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:

---
type: slide
---

Then, you can preview slides in Both Mode:

Export slides to PDF format

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.

Advanced Usage: Customizing the Entire Deck

Setting slide options

We can customize the slide options from the Share menu → Customize slides.

For example:

theme: solarized
transition: 'fade'

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 #.

---

Advanced Usage: Customizing individual slides

custom background image:

---

<!-- .slide: data-background="fill in image's link" -->
#### testslide

---

---

Advanced Usage: Spotlight mode

Forgot your laser pointer at home, or cannot use a pointer in an online meeting? Enable the spotlight mode in YAML frontmatter like below:

slideOptions:
  spotlight:
    enabled: true

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.

---

Demo

---

Advanced Usage: Slide Timer

Want to keep track of the time without constantly checking your watch?
Enable the slide timer in YAML frontmatter:

slideOptions:
  allottedMinutes: 5  # Minutes alloted for a slide.

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.

---

Demo

---

Other YAML Customization Options

# Display controls in the bottom right corner
controls: true

# Display a presentation progress bar
progress: true

# Set default timing of 2 minutes per slide
defaultTiming: 120

# Display the page number of the current slide
slideNumber: false

# Push each slide change to the browser history
history: false

# Enable keyboard shortcuts for navigation
keyboard: true

# Enable the slide overview mode
overview: true

# Vertical centering of slides
center: true

# Enables touch navigation on devices with touch input
touch: true

# Loop the presentation
loop: false

# Change the presentation direction to be RTL
rtl: false

# Randomizes the order of slides each time the presentation loads
shuffle: false

# Turns fragments on and off globally
fragments: true

# Flags if the presentation is running in an embedded mode,
# i.e. contained within a limited portion of the screen
embedded: false

# Flags if we should show a help overlay when the questionmark
# key is pressed
help: true

# Flags if speaker notes should be visible to all viewers
showNotes: false

# Global override for autolaying embedded media (video/audio/iframe)
# - null: Media will only autoplay if data-autoplay is present
# - true: All media will autoplay, regardless of individual setting
# - false: No media will autoplay, regardless of individual setting
autoPlayMedia: null

# Number of milliseconds between automatically proceeding to the
# next slide, disabled when set to 0, this value can be overwritten
# by using a data-autoslide attribute on your slides
autoSlide: 0

# Stop auto-sliding after user input
autoSlideStoppable: true

# Use this method for navigation when auto-sliding
autoSlideMethod: Reveal.navigateNext

# Enable slide navigation via mouse wheel
mouseWheel: false

# Hides the address bar on mobile devices
hideAddressBar: true

# Opens links in an iframe preview overlay
previewLinks: false

# Transition style
transition: 'slide' 
# none/fade/slide/convex/concave/zoom

# Transition speed
transitionSpeed: 'default'
# default/fast/slow

# Transition style for full page slide backgrounds
backgroundTransition: 'fade'
# none/fade/slide/convex/concave/zoom

# Number of slides away from the current that are visible
viewDistance: 3

# Parallax background image
parallaxBackgroundImage: ''
# e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"

# Parallax background size
parallaxBackgroundSize: ''
# CSS syntax, e.g. "2100px 900px"

# Number of pixels to move the parallax background per slide
# - Calculated automatically unless specified
# - Set to 0 to disable movement along an axis
parallaxBackgroundHorizontal: null
parallaxBackgroundVertical: null

# The display mode that will be used to show slides
display: 'block'

# Enable spotlight mode
spotlight:
  enabled: true
  
# Enable timer (in minutes)
allottedMinutes: 5