All Docs
Effective Online Presence
Hugo Blox Example Markdown Extensions and Capabilities
Displaying Markdown Presentation Slides with Reveal.js in Hugo Blox

Displaying Markdown Presentation Slides with Reveal.js in Hugo Blox

Need to get back to Section 1?
Updating and Troubleshooting the Hugo Blox SSG Template

One of the standout features of the Hugo Blox SSG template is its ability to seamlessly create and publish presentation slides using the integrated Reveal.js HTML presentation framework. This capability allows academics, technical content creators, and professionals to develop, share, and present their work directly from their Hugo Blox website, simplifying the entire process of creating and distributing presentation content.

The Power of Reveal.js

Reveal.js is a popular HTML framework that enables the creation of interactive, web-based presentation slides. Unlike traditional presentation software, Reveal.js allows users to build slides using simple Markdown syntax, making it a perfect fit for Hugo Blox, which also relies on Markdown for content creation.

Creating Presentation Slides in Hugo Blox

With Hugo Blox, creating presentation slides using Reveal.js is straightforward. By default, Hugo Blox integrates Reveal.js, enabling users to generate slides directly from Markdown files without needing additional setup.

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

    Example of a slide 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.)

---

  2. Formatting and Customization of Markdown slides rendered with Reveal.js: Reveal.js supports a wide range of features, including transitions, themes, and multimedia integration, providing a rich and dynamic experience for audiences. It’s also highly customizable, allowing presenters to tailor their slides to match the tone and style of their content (Reveal.js). Hugo Blox allows you to customize your presentation with various themes and code highlight styles. You can adjust these settings in the front matter of your Markdown file to suit the needs of your presentation (Hugo Blox Docs).

  3. Publishing and Sharing: Once your slides are created, you can publish them on your Hugo Blox website. This makes sharing your presentation as simple as providing a link to the relevant page on your site. This capability is particularly useful for academic conferences, classroom teaching, thesis defenses, and other professional presentations where accessibility and ease of distribution are crucial.

    • Example Use Cases: Presentations can be showcased on personal or lab websites, as discussed by the Miller Lab, which uses Hugo Blox to present clinical and translational research (The Miller Lab).

Advantages of Using Hugo Blox for Presentations

  1. Streamlined Workflow: With Hugo Blox, the process of creating and publishing presentations is integrated into your website management workflow. This means you don’t need to use separate software for creating slides and publishing them online.

  2. Ease of Access and Distribution: Once your presentation is live on your website, it can be accessed from anywhere with an internet connection. This eliminates the need to carry presentation files physically or worry about compatibility issues with different devices. For in-person conferences, simply provide the audience with a link to your slides, making it easier to share your work without technical hiccups.

  3. Revolutionizing Conference Participation: By hosting your presentations online, you ensure that they are always accessible and up-to-date. This can significantly enhance the experience of participating in live conferences, where you no longer need to carry USB drives or laptops with your presentation files.

  4. Local Copies and Offline Use: Even though your presentation is hosted online, you can easily export it as a local copy for offline use. This flexibility ensures that you have control over how and where your content is displayed.

Practical Examples and Resources

  • Example Slides: This example of Markdown Slides showcases how slides are rendered from my website. Not all features of Markdown Slides are demonstrated in this example, but it provides a reasonable overview of some of the capabilities.

  • Guides and Tutorials: For more detailed instructions on embedding and customizing Reveal.js slides within Hugo Blox, refer to Yamada’s tutorial on Zenn, which provides step-by-step guidance on creating and embedding slides.