Creating slides with Quarto and Reveal.js

Adapted from Emil Hvitfeldt’s 2023 NYR presentation

Will Simmons
4 August 2023
WCM Biostatistics Computing Club

What is Quarto?

Multi-language, next generation version of R Markdown from Posit (i.e., RStudio)
R Markdown isn’t going away (see this post)
However, all new features will be implemented in Quarto
Render .Rmd as .qmd without any changes - try it!

What is Reveal.js?

Open source HTML presentation framework
Very flexible - anything you can do with a webpage
Lucky for us, included in Quarto as the preferred presentation format
Already very well-documented by Posit!

What were/are the alternatives?

xaringan: all functionality and more included in Reveal.js
Google Slides: great, especially if you don’t need inline code
Powerpoint: ???

Quarto + Reveal.js Basics

.qmd file:

---
title: "Basic Revealjs"
format: revealjs
editor: visual
---

## Quarto

Quarto enables you to weave together content and executable code into a finished presentation.

## Bullets

When you click the **Render** button a document will be generated that includes:

-   Content authored with markdown
-   Output from executable code

## Code

When you click the **Render** button a presentation will be generated that includes both content and the output of embedded code. You can embed code like this:

```{r}
1 + 1
```

Output:

Lots for us to do with Quarto Reveal.js

.qmd file:

---
title: "Reveal.js Tricks"
format: revealjs
---

## Columns are easy!

::: columns

::: {.column width="50%"}
First column

Amazing!
:::

::: {.column width="50%"}
Second column

Wow!
:::

:::

## Columns are easy! 

::: columns

::: {.column width="33%"}
First column

Amazing!
:::

::: {.column width="34%"}
Second column

Wow!
:::

::: {.column width="33%"}
Third column?!

Astounding!
:::

:::

::: aside

::: {.fragment}
Just need to specify `{column width="x%"}` for each column
:::

:::

## Absolute positioning

![](images/cat1.jpeg){.absolute top=200 left=0 width="350"}

![](images/cat2.jpeg){.absolute top=50 right=50 width="300"}

![](images/cat3.jpeg){.absolute bottom=0 right="30%" width="400"}

::: {.absolute top=300 right=20}
Put images and text wherever you want!
:::


## Vertical centering {.center}

Is normally super hard but now simple!

::: {style="text-align: center;"}
## Horizontal centering

Is a little trickier
:::


## {.center}

we can have
[big text]{.r-fit-text}
as big as the screen can fit!

## Other fun things

<br>

::: small
<a href='https://quarto.org/docs/presentations/revealjs/advanced.html'>🔗</a> Advanced Quarto Reveal.js:

- Slide transitions
- Animations
- Fragments (incrementally reveal/highlight elements, including code)
- Plugins
- Much more!
:::

Output:

Go make some slides!

Quarto + Reveal.js: as easy or flexible as you want
Will help ease my transition from .Rmd to .qmd
Easy to deploy online (e.g., GitHub pages)
FUN (?)

Creating slides with Quarto and Reveal.js

What is Quarto?

What is Reveal.js?

What were/are the alternatives?

Quarto + Reveal.js Basics

.qmd file:

Output:

Lots for us to do with Quarto Reveal.js

.qmd file:

Output:

Go make some slides!

Further reading