Skip to main content

Reveal.js presentations

Overview

Like other documents, a revealjs presentation in Quarto is a Markdown document that is compiled to an HTML presentation using the reveal.js HTML presentation framework. Add format: revealjs to the document’s front matter to choose the slideshow format:

---
format: revealjs
---

From there, headings become slides and the document metadata becomes a title slide. The rest of this page walks through the slide-authoring features Quarto 2 supports today.

Note

Quarto 2’s reveal.js support is still growing. This page documents only what is implemented now; features such as code-line highlighting, the speaker-view UI, and the reveal.js plugins (menu, search, chalkboard) are not yet available.

Creating slides

A level-2 heading (##) starts a new slide, and the heading content becomes the slide title. A level-1 heading (#) starts a section, gathering the slides beneath it into a vertical stack. A horizontal rule (---) starts a new slide with no title.

---
title: "Habits"
author: "Jane Doe"
format: revealjs
---

## Getting up

- Turn off alarm
- Get out of bed

## Going to sleep

- Get in bed
- Count sheep

Demo 1: A minimal deck: the front matter becomes a title slide, and each ## heading starts a new slide. View source

Sections and rule-delimited slides follow the same heading logic:

# Part One

## First topic

Content.

# Part Two

## Another topic

Content.

---

An untitled slide, created with a horizontal rule.

Demo 2: Level-1 headings build section stacks, and a horizontal rule starts an untitled slide. View source

The title slide

When the front matter carries a title metadata entry (and optionally, an author or date fields), Quarto will produce a title slide.

Slide level

By default, level-2 headings make slides and level-1 headings make sections. The slide-level option moves that boundary: with slide-level: 1, level-1 headings become slides and there are no section stacks.

---
format:
  revealjs:
    slide-level: 1
---

Fragments

A fragment reveals part of a slide on a later click instead of all at once. Wrap the content in a .fragment div, and reveal.js holds it back until you advance.

Variant classes such as .fade-up, .fade-out, .grow, and .highlight-red change how a fragment animates in. To control the reveal order independently of source order, set fragment-index:

::: {.fragment fragment-index="2"}
Shown second.
:::

::: {.fragment fragment-index="1"}
Shown first.
:::

Demo 3 puts a couple of fragments together in a runnable deck.

## Reveal on click

::: {.fragment}
Appears on the first click.
:::

::: {.fragment .fade-up}
Then this one fades up.
:::

Demo 3: Fragments reveal content one step at a time. View source

Incremental lists

Lists are a special case of fragments. To reveal every list in the deck one item at a time, set incremental globally:

---
format: revealjs
incremental: true
---

To override that choice for a single list, wrap it. A .nonincremental list shows all its items at once even under the global setting, and an .incremental list steps through its items even when the global setting is off:

::: {.nonincremental}
- All three
- appear
- together.
:::

Demo 4: A .nonincremental list opts out of the deck’s incremental reveal. View source

Multiple columns

To place content side by side, use a .columns container holding two or more .column divs. Each column’s width sets its share of the row.

:::: {.columns}

::: {.column width="40%"}
Left column.
:::

::: {.column width="60%"}
Right column.
:::

::::

Demo 5: Two columns sit side by side, each taking its share of the row. View source

Speaker notes

A .notes div holds commentary for the presenter. The note does not appear on the slide.

## A slide with notes

Slide content the audience sees.

::: {.notes}
Speaker notes go here.
:::

Demo 6: Speaker notes travel with the slide without appearing on it. View source

Note

Speaker notes render today as a hidden aside; the live speaker view that displays them while presenting is not yet available.

Asides

An aside holds content of more peripheral interest — a caveat, a citation, a side remark. Quarto shows it small and muted at the bottom of the slide.

## A slide with an aside

The main point, front and center.

::: {.aside}
Some commentary of more peripheral interest.
:::

Demo 7: An aside sits small and muted at the bottom of the slide. View source

Themes

Every deck starts from the default theme — a left-aligned, white theme tuned to feel like Quarto. To restyle the whole deck, set theme: to one of the built-in reveal.js themes (dark, league, dracula, solarized, and the rest):

---
format:
  revealjs:
    theme: dark
---

## A dark slide

Content on a dark background.

Demo 9: The theme: option restyles the deck’s background, text, and links at once; this deck uses the built-in dark theme. white aliases to default and black aliases to dark. View source

Stretching images

When a slide’s only image stands in a block of its own, Quarto sizes it to fill the space the slide’s other content leaves — reveal.js calls this .r-stretch, and Quarto adds it automatically so a large image never overflows. A heading and a line of explanation can sit alongside the image.

## A single image fills the slide

Here is our architecture:

![](diagram.svg)

Demo 11: A lone slide image stretches to fill the available space. To keep an image at its natural size, set auto-stretch: false, give the image an explicit width/height, or mark it .nostretch. View source

Footnotes

Footnotes

Footnotes on a slide are gathered into an aside at the bottom of that slide, rather than into a single list at the end of the deck. Each slide numbers its own footnotes from one, and when a slide carries both an aside and footnotes, they share a single block at the bottom.

## Per-slide footnotes

A claim that needs a citation.^[The footnote text.]

::: {.aside}
An aside and the footnotes share the bottom of the slide.
:::

Demo 8: Footnotes gather into a per-slide aside at the bottom of their own slide. View source

To keep footnotes at the end of the deck instead — as a final slide — set reference-location: document:

---
format:
  revealjs:
    reference-location: document
---