What is Quarto?

The anatomy of a reveal.js deck

Emil Hvitfeldt

Objectives

Understand the structure of a .qmd reveal.js file
Know how slides and section slides are created
Read and set common YAML options
Use divs and spans to attach attributes to content

This workshop has a book

slidecrafting-book.com

Everything today is in there, in more detail.

Why Quarto + reveal.js?

Reproducible

We get all the goodness from quarto,

Code cells run at render time:

my-deck.qmd

```{r}
#| echo: false
plot(1:10)
```

Figures and tables regenerate from the data instead of being pasted screenshots, HUGE when new data comes in.

HTML-native

A rendered deck is a web page.

Animation, video, iframes, links, and anything else the web can do.

And when someone insists

The same source renders to PDF or PowerPoint.

Except for html specific things like animation and interactivity.

Your first deck

A minimal deck

my-deck.qmd

---
title: "My first deck"
author: "Your Name"
format: revealjs
---

## First slide

Some content, with a **bold** word.

- one bullet
- another bullet

## Second slide

```{r}
#| echo: true
summary(cars$speed)
```

Render it

Terminal

quarto render my-deck.qmd

Produces my-deck.html.

If you are in a repo with index.qmd only then quarto render will find it

Better: preview it

Terminal

quarto preview my-deck.qmd

Re-renders and refreshes the browser on every save.

RStudio and Positron will help you here.

Presenting shortcuts

Key	Action
`→` / `←`	next / previous slide
`f`	fullscreen
`s`	speaker view
`o`	overview of all slides
`?`	all shortcuts

The YAML header

my-deck.qmd

---
title: "My first deck"
subtitle: "With some options"
author: "Your Name"
date: today
format:
  revealjs:
    slide-number: true
    progress: true
    center: false
    incremental: false
    footer: "My conference talk"
---

Options worth knowing on day one

theme a built-in theme, your own SCSS, or both: [default, styles.scss]
width / height the canvas you design against, 1280 x 720
echo show code or not; false by default, turn it on where it earns the space
code-line-numbers false to hide code line numbers
pagetitle what the browser tab says

Slides, divs, and spans

Structure comes from headings

## a new slide, heading becomes the title
# a section slide, a title-only divider

Structure comes from headings

my-deck.qmd

# Part one

## A titled slide

Content.

## Another titled slide

More content.

# Part two

## A slide in part two

Even more content.

Divs and spans

Markdown alone cannot say “make this part special”. Quarto adds two ways to wrap content and attach attributes to it.

a div wraps one or more blocks: paragraphs, lists, images, code
a span wraps a piece of text inside a paragraph

Almost every feature in this workshop is one of these two with a different class on it.

The syntax

Div

my-deck.qmd

::: {.center}
Everything here
is inside the div.
:::

Opening fence, attributes, content, closing fence.

Span

my-deck.qmd

The [important part]{.highlight}
of the sentence.

Text in [], attributes in {}, no space between them.

What goes in the braces

my-deck.qmd

::: {#summary .smaller .fragment style="color: red;"}
Content.
:::

.name a class, the usual way to reach a div from CSS
#name an id, unique on the page
key="value" any other attribute, style= included

Order does not matter, and you can use as many as you like.

Nesting: count your colons

Works

:::: {.outer}

::: {.inner}
Content.
:::

::::

Breaks

::: {.outer}

::: {.inner}
Content.
:::

:::

The outer fence needs more colons than the inner one, otherwise Pandoc closes the wrong div. Three is only the minimum.

Divs and spans in action

my-deck.qmd

## Highlights

Some [red text]{style="color: #b22222;"} in a sentence.

::: {.smaller}
This whole block is smaller.
:::

::: {style="text-align: center;"}
And this one is centered.
:::

Columns

Columns are just nested divs: a .columns div holding .column divs.

my-deck.qmd

## Two columns

:::: {.columns}

::: {.column width="50%"}
Left side.
:::

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

::::

Your turn

Exercise

Create my-deck.qmd with format: revealjs
Add a title slide, one # section slide, and two ## slides
quarto preview my-deck.qmd, then press o
Deliberately overfill a slide: five bullets, each a full sentence. Look at it. Then split it so each slide carries one idea.

Thank you

Back to the workshop materials.