quarto-presentations

name	quarto-presentations
description	Create and edit Quarto Revealjs presentations (.qmd slide decks). Use when the user asks to "create a presentation", "make slides", "build a slide deck", "create a Revealjs presentation", "add speaker notes", "set slide transitions", "create a Quarto talk", or needs help with slide layout, themes, columns, fragments, code highlighting, auto-animate, or any presentation-specific Quarto feature.

Quarto Revealjs Presentations

Create slide presentations using Quarto's Revealjs format. Presentations are authored as .qmd files and rendered to interactive HTML slides.

Critical Rule: Relative Paths

All links to images, logos, CSS files, and other resources MUST use paths relative to the .qmd file's location. Never use absolute paths.

# CORRECT
![](images/diagram.png)
logo: images/logo.png

# WRONG
![](/absolute/path/to/project/images/diagram.png)

Basic Setup

Minimal Presentation

---
title: "Presentation Title"
author: "Author Name"
date: today
format: revealjs
---

## First Slide

Content here.

## Second Slide

More content.

Configured Presentation

---
title: "My Talk"
subtitle: "Conference Name"
author: "Author Name"
date: today
format:
  revealjs:
    theme: dark
    slide-number: true
    footer: "Conference 2026"
    logo: images/logo.png
    incremental: true
    scrollable: true
    transition: slide
    transition-speed: fast
    code-line-numbers: true
    smaller: false
---

Slide Creation

Level 2 headings (##) create titled slides. Level 1 headings (#) create section title slides. Horizontal rules (---) create untitled slides.

# Section Title
This is a section divider slide.

## Regular Slide
Content on a normal slide.

---

This slide has no title.

Title Slide Background

title-slide-attributes:
  data-background-color: "#2d4059"
  data-background-image: images/bg.png
  data-background-size: cover

Slide Backgrounds

Apply per-slide with heading attributes:

## Colored Background {background-color="#43464B"}

## Image Background {background-image="images/bg.jpg" background-size="cover" background-opacity="0.5"}

## Video Background {background-video="video.mp4" background-video-loop="true" background-video-muted="true"}

## Gradient {background-gradient="linear-gradient(to right, #4facfe, #00f2fe)"}

Content Layout

Two Columns

## Side by Side

:::: {.columns}
::: {.column width="50%"}
Left column content.
:::

::: {.column width="50%"}
Right column content.
:::
::::

Incremental Lists

## Incremental Bullets

::: {.incremental}
- First point (appears on click)
- Second point
- Third point
:::

Or use . . . (three dots) for manual pauses between any content:

## Step by Step

First content block.

. . .

This appears after a click.

. . .

And this after another click.

Fragments

Reveal elements with animation effects:

::: {.fragment .fade-in}
Fades in on click.
:::

::: {.fragment .highlight-red}
Text highlights red.
:::

::: {.fragment .fade-up fragment-index=1}
Appears first (by index).
:::

Fragment types: fade-in, fade-out, fade-up, fade-down, fade-left, fade-right, grow, shrink, strike, highlight-red, highlight-green, highlight-blue, highlight-current-red.

Tabsets

## Options

::: {.panel-tabset}

### Tab One
Content for tab one.

### Tab Two
Content for tab two.

:::

Note: only the first tab renders when printing to PDF.

Speaker Notes

## Slide Title

Visible content.

::: {.notes}
These notes are only visible in speaker view.
Press S during presentation to open speaker view.
:::

Code on Slides

Syntax Highlighted Code

## Code Example

```{python}
#| echo: true
#| eval: false
#| code-line-numbers: "2-3|5"

import pandas as pd

data = pd.read_csv("data.csv")
results = data.groupby("category").mean()

print(results)
```

Line highlighting with code-line-numbers supports:

• "2-3" — highlight lines 2-3
• "2-3|5" — first highlight 2-3, then 5 (progressive)
• "|2-3|5" — start with no highlight, then 2-3, then 5

Code Output Placement

output-location: fragment    # Reveal output on click
output-location: slide       # Output on next slide
output-location: column      # Output in adjacent column
output-location: column-fragment  # Column, revealed on click

Themes

Built-in themes: beige, blood, dark, default, dracula, league, moon, night, serif, simple, sky, solarized.

format:
  revealjs:
    theme: [default, custom.scss]  # Base theme + custom overrides

Custom SCSS Theme

/*-- scss:defaults --*/
$presentation-heading-color: #2d4059;
$body-bg: #ffffff;
$body-color: #333333;
$link-color: #3498db;
$font-family-sans-serif: 'Open Sans', sans-serif;
$presentation-heading-font: 'Lora', serif;

/*-- scss:rules --*/
.reveal .slide-background {
  background-size: cover;
}

Auto-Animate

Automatically animate element transitions between adjacent slides:

## {auto-animate=true}

::: {style="margin-top: 100px;"}
Animating content
:::

## {auto-animate=true}

::: {style="margin-top: 200px; font-size: 3em; color: red;"}
Animating content
:::

Code blocks auto-animate by default when slides share auto-animate=true:

## {auto-animate=true}

```python
x = 1
```

## {auto-animate=true}

```python
x = 1
y = 2
z = x + y
```

Advanced Layout

Absolute Positioning

## Positioned Elements

![](images/diagram.png){.absolute top=50 left=50 width="300"}

::: {.absolute bottom=50 right=50}
Caption text
:::

Fit Text

## {.center}

::: {.r-fit-text}
BIG TEXT
:::

Slide Size

format:
  revealjs:
    width: 1920     # Widescreen
    height: 1080
    margin: 0.1

Figures on Slides

Figures auto-stretch to fill available space. Control with:

format:
  revealjs:
    auto-stretch: true   # Default; stretches single images
    fig-align: center

For multi-panel figures, use the same layout syntax as documents:

## Results

::: {layout-ncol=2}
![Treatment A](images/a.png)

![Treatment B](images/b.png)
:::

Navigation and Controls

format:
  revealjs:
    controls: true           # Arrow controls
    progress: true           # Progress bar
    history: true            # Browser back/forward
    hash: true               # Slide anchors in URL
    navigation-mode: linear  # or vertical, grid
    slide-number: "c/t"      # Current/Total format
    chalkboard: true         # Drawing tools

Printing to PDF

Open the presentation in a browser and append ?print-pdf to the URL, then use browser print (Ctrl/Cmd+P) to save as PDF.

format:
  revealjs:
    pdf-separate-fragments: true  # Each fragment step = separate page

Resources

• references/revealjs-options.md — Complete YAML option reference for all Revealjs settings
• references/slide-patterns.md — Common slide layout patterns and templates for different presentation types