# Make Presentation Slides with HackMD

HackMD integrates [reveal.js](https://github.com/hakimel/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.**

---

>[!Important]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!**


:::success
Observe this example closely: [Slide-example](/slide-example?both)
:::

## Slide Modes
We can choose <i class="fa fa-tv"></i> **Slide Mode** from the "Mode" dropdown (by default showing <i class="fa fa-eye fa-fw"></i> **View Mode**) in the sharing <i class="fa fa-share-alt fa-18"></i> 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 <kbd>Esc</kbd> 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 <kbd>Enter</kbd> or <kbd>Return</kbd>.


### Speaker Mode
When we are in the slide mode, we can press the <kbd>S</kbd> 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](/slide-example?both), 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.**

>[!Important]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 <span class="fa fa-fw fa-print"></span>:


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.

>[!Note]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. :running:

----

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