Displaying Markdown Presentation Slides with Reveal.js in Hugo Blox

Hugo Blox, a powerful static site generator (SSG) template, offers seamless integration with the Reveal.js HTML presentation framework. This feature allows academics, technical content creators, and professionals to create, share, and present their work directly from their Hugo Blox website, simplifying the process of creating and distributing presentation content.

Why Use Reveal.js?

Reveal.js is a popular HTML framework for creating interactive, web-based presentation slides. Unlike traditional presentation software, it uses simple Markdown syntax, making it an ideal fit for Hugo Blox, which also relies on Markdown for content creation. This combination enables users to efficiently create and publish professional slides.

How to Create Presentation Slides in Hugo Blox

Setting Up a New Slide

To create a new presentation, start by creating a Markdown file in your Hugo Blox site. This file will contain the content for your slides, written in Markdown. Hugo Blox automatically converts this content into a Reveal.js presentation.

Here’s an example of slides written in Markdown:

---
title: 'Create slides in Markdown with Hugo Blox'
subtitle: ''
summary: "An introduction to using Hugo Blox's Slides feature."
authors: [admin]
tags: []
categories: []
date: '2024-08-12T00:00:00Z'
lastmod: '2024-08-12T00:00:00Z'
draft: false
slides:
  # Choose a theme from https://github.com/hakimel/reveal.js#theming
  theme: 'black'
  # Choose a code highlighting style (if highlighting enabled in `params.toml`)
  #   Light style: github. Dark style: dracula (default).
  highlight_style: 'dracula'
---

# Create slides in Markdown with Hugo Blox

[Hugo Blox](https://hugoblox.com/) | [Documentation](https://docs.hugoblox.com/reference/content-types/#slides)

---

## Features

- Efficiently write slides in Markdown
- 3-in-1: Create, Present, and Publish your slides
- Supports speaker notes
- Mobile friendly slides

---

## Controls

- Next: `Right Arrow` or `Space`
- Previous: `Left Arrow`
- Start: `Home`
- Finish: `End`
- Overview: `Esc`
- Speaker notes: `S`
- Fullscreen: `F`
- Zoom: `Alt + Click`
- [PDF Export](https://github.com/hakimel/reveal.js#pdf-export): `E`

---

(etc.)

---

Customizing Your Slides

Reveal.js offers extensive customization options, including themes, transitions, and multimedia integration. You can adjust these settings in the front matter of your Markdown file. For example:

Themes

Choose from a variety of themes to match your presentation style.

Code Highlighting

Select a code highlighting style (e.g., dracula for dark mode or github for light mode).

For more details, refer to the Reveal.js documentation or the Hugo Blox Docs.

Publishing and Sharing

Once your slides are ready, publish them on your Hugo Blox website. Sharing is as simple as providing a link to the relevant page. This is particularly useful for:

• Academic conferences
• Classroom teaching
• Thesis defenses
• Professional presentations

Example Use Case: The Miller Lab uses Hugo Blox to showcase clinical and translational research presentations (The Miller Lab).

Benefits of Using Hugo Blox for Presentations

Streamlined Workflow

Hugo Blox integrates the process of creating and publishing presentations into your website management workflow. No need for separate software—everything is managed in one place.

Easy Access and Distribution

Your presentations are hosted online, accessible from anywhere with an internet connection. Share a simple link with your audience, eliminating the need for physical files or device compatibility concerns.

Enhanced Conference Participation

Hosting presentations online ensures they are always up-to-date and accessible. This eliminates the need to carry USB drives or laptops, making conference participation smoother.

Offline Flexibility

Export your presentation as a local copy for offline use. This ensures you have control over how and where your content is displayed.

Practical Examples and Resources

• Example Slides: Check out this example of Markdown Slides to see how slides are rendered on a Hugo Blox website.
• Tutorials: For step-by-step guidance, refer to Yamada’s tutorial on Zenn.