Extensions & wrap-up

Sprucing up your slides

Emil Hvitfeldt

Objectives

• Install and use a Quarto reveal.js extension
• Know where to find more extensions
• Leave with next steps and resources

What is an extension?

Someone else already solved it

• An extension is a folder of Lua, JavaScript, and CSS that Quarto knows how to load
• It ships as a GitHub repo, and you install it by name
• Nothing to configure globally, it lives inside your project

Every styled code block you have seen today came from one.

Installing

Terminal

quarto add emilhvitfeldt/quarto-revealjs-codewindow

• Downloads into _extensions/ next to your .qmd
• Commit that folder, it is part of the project

Codewindow

my-deck.qmd

---
revealjs-plugins:
  - codewindow
---

## Some code

::: {.codewindow .r}
analysis.R

```r
mtcars |>
  group_by(cyl) |>
  summarize(mean_mpg = mean(mpg))
```
:::

Fontawesome

my-deck.qmd

Find me on {{< fa brands github >}} GitHub.

{{< fa triangle-exclamation >}} Watch out for this.

Find me on GitHub.

Watch out for this.

roughnotation

Hand-drawn circles, underlines, and highlights, animated on a keypress.

my-deck.qmd

---
filters:
  - roughnotation
---

## Annotations

[Highlight me!]{.rn-fragment}

[underlined phrase]{.rn-fragment rn-type=underline rn-color=red}

checklist-fragments

A task list that draws itself in, one item per keypress.

my-deck.qmd

---
filters:
  - checklist-fragments
---

## Where we got to

::: checklist
- [/] Ship the feature
- [-] Missed the deadline
- [~] Tests still running
:::

chatbubbles

iOS-style messages, revealed one at a time.

my-deck.qmd

---
revealjs-plugins:
  - chat-bubbles
---

## The invite

::: {.chat}
::: {.bubble-right}
Hey, are you coming tonight?
:::

::: {.fragment .bubble-left}
Yeah! What time does it start?
:::

::: {.fragment .bubble-right}
Doors open at 7
:::
:::

timeline

Events on a line, horizontal or vertical, panning as you step through them.

my-deck.qmd

---
filters:
  - timeline
---

## How it went

::: timeline
::: {.event data-label="2020"}
**Project Started**
:::
::: {.event data-label="2021"}
**First Release**
:::
::: {.event data-label="2024"}
**Version 2.0**
:::
:::

shapes

Circles, hexagons, stars, and more, as divs that hold real content.

my-deck.qmd

---
filters:
  - shapes
---

## Shapes

::: {.shape-circle fill="blue"}
Hello
:::

::: {.shape-hexagon fill="none" stroke="red" .shape-lg}
:::

tegaki

Text that writes itself out in handwriting.

my-deck.qmd

---
filters:
  - tegaki
---

## Handwriting

[Hello, World!]{.tegaki .fragment}

[Hello!]{.tegaki font="Parisienne" size="6" duration="2"}

editable

Move, resize, restyle, and retype anything on a rendered slide, then save it back to the source.

my-deck.qmd

---
revealjs-plugins:
  - editable
filters:
  - editable
---

## Move me around

Drag this text, resize it, or retype it.

![](images/tim-marshall.jpg){width="400"}

Not just mine

reveal-auto-agenda

Builds an agenda slide from your sections, and repeats it between them.

my-deck.qmd

---
filters:
  - reveal-auto-agenda
---

# Collecting the data

## A slide

# Fitting the model

## Another slide

By Andrie de Vries.

flourish

Styles individual words inside a code chunk: highlighted, masked, or underlined.

my-deck.qmd

---
filters:
  - flourish
---

## Picking out a word

```{r}
#| flourish:
#| - target: "mean"
#| echo: true
mean(mtcars$mpg)
```

By Kelly Bodwin and Visruth Srimath Kandali. Pair it with roughnotation to annotate code.

The registry

quarto-extensions lists what the community has built.

• Searchable listing, one row per extension
• Badges tell you whether something is stable, experimental, or abandoned
• Adding your own is a one-line pull request

Wrap-up

What we covered

1. The anatomy of a .qmd deck
2. Theming with SCSS variables
3. Content: layout, images, code
4. Interactivity: fragments and auto-animate
5. Extensions

Where to go next

• The book: slidecrafting-book.com
• Quarto’s reveal.js reference: quarto.org
• “Steal” from decks you like, the source is always a click away

Thank you

Back to the workshop materials.