reveal-hugo

A Hugo theme for creating Reveal.js presentations.

~ made by @dzello ~

What’s included?

  • All Reveal.js HTML, CSS and JS (v3.6.0)
  • All out-of-the-box Reveal.js themes
  • A “Reveal” outputFormat that outputs a presentation for any Hugo section

Features

  • Markdown files are parsed into multiple slides
  • Built-in shortcodes expose Reveal.js functionality
  • Customize Reveal.js parameters including the theme

Multiple slides per markdown file

Separate slides with ---

# Slide 1

Body 1.

---

# Slide 2

Body 2.

I’m a new slide from the same markdown file.

Usage

Prerequisite

Add this to your config.toml:

[outputFormats.Reveal]
baseName = "index"
mediaType = "text/html"
isHTML = true

Configure themes

Optional. In config.toml or front matter of individual presentations.

[params.reveal_hugo]
theme = "moon"
highlight_theme = "zenburn"

Reveal.js themes · highlight.js themes

Custom Reveal.js theme

Point to a file in the static directory.

[params.reveal_hugo]
custom_theme = "themes/dzello.css"

Configure Reveal.js

Set snakecase versions of Reveal.js params, which will be camelized and passed to Reveal.initialize.

[params.reveal_hugo]
slide_number = true
transition_speed = 'fast'

Reveal config params

Creating presentations

Presentation at /

In content/_index.md:

+++
outputs = ["Reveal"]
+++

# Slide 1

---

# Slide 2

Put more slides in content/home/*.md

+++
weight = 10
+++

# Slide 3

---

# Slide 4

Use weight to specify the order relative to other files.

For any Hugo section

In content/{section}/_index.md:

+++
outputs = ["Reveal"]
+++

# Slide 1

---

# Slide 2

Put more slides in content/{section}/*.md

+++
weight = 10
+++

# Slide 3

---

# Slide 4

Use weight to specify the order relative to other files.

Fragment shortcode

The fragment shortcode makes content appear incrementally.

{{% fragment %}} One {{% /fragment %}}
{{% fragment %}} Two {{% /fragment %}}
{{% fragment %}} Three {{% /fragment %}}

One Two Three

Frag shortcode

The frag shortcode is more terse than fragment. It accepts a c attribute.

{{< frag c="One" >}}
{{< frag c="Two" >}}
{{< frag c="Three" >}}

One Two Three

Both fragment and frag accept two additional parameters:

  • class: sets the class of the wrapping span element
  • index: controls the order in which sections will appear

Section shortcode

The section shortcode groups slides into a vertical display.

To continue, use the down arrow or swipe down.

Put the shortcode around the slides you want to group together.

{{% section %}}

## Section slide 1

---

## Section slide 2

{{% /section %}}

Keep scrolling down.

That’s it!

Use the right arrow or swipe right to continue.

Slide shortcode

Customize individual slide parameters like background color and transition.

See all parameters

Custom slide 1

{{% slide transition="zoom" transition-speed="fast" %}}
## Custom slide 1
{{% /slide %}}

Custom slide 2

{{% slide background-color="#FF4081" %}}
## Custom slide 2
{{% /slide %}}

Note shortcode

Add speaker notes to your presentation.

{{% note %}}
Type 's' to see this slide's speaker notes.
{{% /note %}}

Pure HTML Slide

Surround slides in a section tag with a data-noprocess attribute to write them in HTML.

Learn more

Resources

Service-ready

Thanks!