Make Presentation Slides with HackMD

--- tags: tutorials disqus: hackmd --- {%hackmd KghC_AJ7Rui37eDW5PVl9Q %} # 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.** ```python= --- ``` :::info :bulb: **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 **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>` key on the keyboard and we will see the overview of all slides. We can then use the keyboard :arrow_left: :arrow_up: :arrow_down: :arrow_right: 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](/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). ![](https://i.imgur.com/ULtedPH.png) So how do we make a section? With **an empty line, ==four== dashes, and another empty line.** ```python= # Title Slide --- # The second slide ---- ## The second slide (also technically the third slide) now belongs to the section of the first slide. ``` #### Recap: Regular slides are separated by a leading `<empty line> --- <empty line>` and section slides by a leading `<empty line> ---- <empty line>`. :::info :bulb: **Hint:** If we want to use a regular slide after a sub slide in a section, use the three dashes separator. ::: ## 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: ```yaml type: slide ``` Then, you can preview slides in Both Mode: ![](https://hackmd.io/_uploads/H15tS3IsY.gif) ## Export slides to PDF format Scroll the page to the bottom in slide mode, you can find the print icon like this : ![](https://i.imgur.com/D8cLhmc.png) Click on it to enter **Printing mode**, and use browser built-in **Print to PDF** feature to export your slides. ![](https://i.imgur.com/Gt3GW1v.png) ## Advanced Usage: Customizing the Entire Deck ### Setting slide options We can customize the slide options from the Share menu → Customize slides. ![](https://hackmd.io/_uploads/SyxF9E6vn.png) For example: ```yaml --- title: Example Slide tags: presentation slideOptions: theme: solarized transition: 'fade' # parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg' --- ``` 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: ```markdown ---  #### 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: ```yaml --- slideOptions: spotlight: enabled: true --- ``` When the spotlight is enabled, hold your mouse left key will keep the spotlight on. :::info :bulb: **Hint**: When spotlight is on, you need to use arrow keys :arrow_left::arrow_up::arrow_down::arrow_right: to navigate slides. ::: ---- ### Demo ![spotlight](https://i.imgur.com/dXhHcCP.gif) --- ## Advanced Usage: Slide Timer Want to keep track of the time without constantly checking your watch? Enable the slide timer in YAML frontmatter: ```yaml --- 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 ![Timer](https://i.imgur.com/l5Akz4B.gif) --- ## Other YAML Customization Options ```yaml # 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 ``` ###### tags: `tutorial`