Part 3: Creating Presentations with Quarto

OCTRI-BERD Workshop July 2025

Jessica Minnier, Meike Niederhausen

OHSU-PSU School of Public Health

2025-07-17

Outline

  • Create Quarto presentation file
  • YAML header
  • How to add new slides
  • Content Layout (scrolling, columns)
  • R code & output
  • Incremental reveals
  • Themes
  • Fonts
  • Title slide
  • Presentation tools
  • Slide file formats
  • Citations
  • Converting to pdf

Getting Started: Your First Presentation

Let’s first dive into creating presentations with Quarto. We’ll be focusing on revealjs for HTML slides, which are very interactive and allow for many types of customizations.

We will talk about how to convert to pdf or use other formats later.

Create a new Rstudio Project (or Quarto Project)

  1. In RStudio, go to File > New Project... > New Directory > New Project.
  • You may choose New Project OR Quarto Project
  • If you choose Quarto Project, a .qmd file will already be present in your folder. You would still follow the next steps.
  • A Quarto Project has an extra file to define settings in .qmd files. This is not necessary for our purposes, but it is an option if you will be using lots of .qmd files for various tasks.
  1. Give your project a name (i.e. QuartoPres) and choose a location (i.e. Desktop). Check the box “Open in new session”

Create a new Quarto Presentation file

  1. Now go to File > New File > Quarto Presentation. Uncheck the box “Use visual markdown editor”. Click “create”
  2. This will create a new file with a .qmd extension. This is your presentation file!

The YAML Header

Every .qmd file starts with a YAML (YAML Ain’t Markup Language) header. This is where you control the main settings for your document.

By default, these basic options are filled in, and you can edit them or add additional options (more later):

---
title: "My Presentation"
author: "Your Name"
format: revealjs
---

Basics

Revealjs

revealjs uses the open source HTML presentation framework reveal.js. Styles are set with CSS and it comes with built in markdown and LaTeX support as well as code syntax highlighting.

More about revealjs can be found on the Quarto.org docs website (embedded below):

Creating Slides

You create new slides using markdown headers (# or ##).

# This is a Title Slide

This is the content of my first slide.

## This is a New Slide

Each `##` starts a new slide.
  • ## creates a standard slide with a heading.
  • A slide with only a title and no body text becomes a title/section slide.

Content Layout

Scrolling Slides 📜

For slides with a lot of content, you can make them scrollable.

## A Long Slide {.scrollable}

This slide has a lot of content that might not fit on one screen. By adding `{.scrollable}`, you allow the user to scroll down to see the rest of the content.
...

You can also include this in the YAML header to make this a global setting so all slides are scrollable.

format: 
  revealjs:
      scrollable: true

A Long Slide

This slide has a lot of content that might not fit on one screen.

library(palmerpenguins)
summary(penguins)
      species          island    bill_length_mm  bill_depth_mm  
 Adelie   :152   Biscoe   :168   Min.   :32.10   Min.   :13.10  
 Chinstrap: 68   Dream    :124   1st Qu.:39.23   1st Qu.:15.60  
 Gentoo   :124   Torgersen: 52   Median :44.45   Median :17.30  
                                 Mean   :43.92   Mean   :17.15  
                                 3rd Qu.:48.50   3rd Qu.:18.70  
                                 Max.   :59.60   Max.   :21.50  
                                 NA's   :2       NA's   :2      
 flipper_length_mm  body_mass_g       sex           year     
 Min.   :172.0     Min.   :2700   female:165   Min.   :2007  
 1st Qu.:190.0     1st Qu.:3550   male  :168   1st Qu.:2007  
 Median :197.0     Median :4050   NA's  : 11   Median :2008  
 Mean   :200.9     Mean   :4202                Mean   :2008  
 3rd Qu.:213.0     3rd Qu.:4750                3rd Qu.:2009  
 Max.   :231.0     Max.   :6300                Max.   :2009  
 NA's   :2         NA's   :2                                 
gt(penguins)
species island bill_length_mm bill_depth_mm flipper_length_mm body_mass_g sex year
Adelie Torgersen 39.1 18.7 181 3750 male 2007
Adelie Torgersen 39.5 17.4 186 3800 female 2007
Adelie Torgersen 40.3 18.0 195 3250 female 2007
Adelie Torgersen NA NA NA NA NA 2007
Adelie Torgersen 36.7 19.3 193 3450 female 2007
Adelie Torgersen 39.3 20.6 190 3650 male 2007
Adelie Torgersen 38.9 17.8 181 3625 female 2007
Adelie Torgersen 39.2 19.6 195 4675 male 2007
Adelie Torgersen 34.1 18.1 193 3475 NA 2007
Adelie Torgersen 42.0 20.2 190 4250 NA 2007
Adelie Torgersen 37.8 17.1 186 3300 NA 2007
Adelie Torgersen 37.8 17.3 180 3700 NA 2007
Adelie Torgersen 41.1 17.6 182 3200 female 2007
Adelie Torgersen 38.6 21.2 191 3800 male 2007
Adelie Torgersen 34.6 21.1 198 4400 male 2007
Adelie Torgersen 36.6 17.8 185 3700 female 2007
Adelie Torgersen 38.7 19.0 195 3450 female 2007
Adelie Torgersen 42.5 20.7 197 4500 male 2007
Adelie Torgersen 34.4 18.4 184 3325 female 2007
Adelie Torgersen 46.0 21.5 194 4200 male 2007
Adelie Biscoe 37.8 18.3 174 3400 female 2007
Adelie Biscoe 37.7 18.7 180 3600 male 2007
Adelie Biscoe 35.9 19.2 189 3800 female 2007
Adelie Biscoe 38.2 18.1 185 3950 male 2007
Adelie Biscoe 38.8 17.2 180 3800 male 2007
Adelie Biscoe 35.3 18.9 187 3800 female 2007
Adelie Biscoe 40.6 18.6 183 3550 male 2007
Adelie Biscoe 40.5 17.9 187 3200 female 2007
Adelie Biscoe 37.9 18.6 172 3150 female 2007
Adelie Biscoe 40.5 18.9 180 3950 male 2007
Adelie Dream 39.5 16.7 178 3250 female 2007
Adelie Dream 37.2 18.1 178 3900 male 2007
Adelie Dream 39.5 17.8 188 3300 female 2007
Adelie Dream 40.9 18.9 184 3900 male 2007
Adelie Dream 36.4 17.0 195 3325 female 2007
Adelie Dream 39.2 21.1 196 4150 male 2007
Adelie Dream 38.8 20.0 190 3950 male 2007
Adelie Dream 42.2 18.5 180 3550 female 2007
Adelie Dream 37.6 19.3 181 3300 female 2007
Adelie Dream 39.8 19.1 184 4650 male 2007
Adelie Dream 36.5 18.0 182 3150 female 2007
Adelie Dream 40.8 18.4 195 3900 male 2007
Adelie Dream 36.0 18.5 186 3100 female 2007
Adelie Dream 44.1 19.7 196 4400 male 2007
Adelie Dream 37.0 16.9 185 3000 female 2007
Adelie Dream 39.6 18.8 190 4600 male 2007
Adelie Dream 41.1 19.0 182 3425 male 2007
Adelie Dream 37.5 18.9 179 2975 NA 2007
Adelie Dream 36.0 17.9 190 3450 female 2007
Adelie Dream 42.3 21.2 191 4150 male 2007
Adelie Biscoe 39.6 17.7 186 3500 female 2008
Adelie Biscoe 40.1 18.9 188 4300 male 2008
Adelie Biscoe 35.0 17.9 190 3450 female 2008
Adelie Biscoe 42.0 19.5 200 4050 male 2008
Adelie Biscoe 34.5 18.1 187 2900 female 2008
Adelie Biscoe 41.4 18.6 191 3700 male 2008
Adelie Biscoe 39.0 17.5 186 3550 female 2008
Adelie Biscoe 40.6 18.8 193 3800 male 2008
Adelie Biscoe 36.5 16.6 181 2850 female 2008
Adelie Biscoe 37.6 19.1 194 3750 male 2008
Adelie Biscoe 35.7 16.9 185 3150 female 2008
Adelie Biscoe 41.3 21.1 195 4400 male 2008
Adelie Biscoe 37.6 17.0 185 3600 female 2008
Adelie Biscoe 41.1 18.2 192 4050 male 2008
Adelie Biscoe 36.4 17.1 184 2850 female 2008
Adelie Biscoe 41.6 18.0 192 3950 male 2008
Adelie Biscoe 35.5 16.2 195 3350 female 2008
Adelie Biscoe 41.1 19.1 188 4100 male 2008
Adelie Torgersen 35.9 16.6 190 3050 female 2008
Adelie Torgersen 41.8 19.4 198 4450 male 2008
Adelie Torgersen 33.5 19.0 190 3600 female 2008
Adelie Torgersen 39.7 18.4 190 3900 male 2008
Adelie Torgersen 39.6 17.2 196 3550 female 2008
Adelie Torgersen 45.8 18.9 197 4150 male 2008
Adelie Torgersen 35.5 17.5 190 3700 female 2008
Adelie Torgersen 42.8 18.5 195 4250 male 2008
Adelie Torgersen 40.9 16.8 191 3700 female 2008
Adelie Torgersen 37.2 19.4 184 3900 male 2008
Adelie Torgersen 36.2 16.1 187 3550 female 2008
Adelie Torgersen 42.1 19.1 195 4000 male 2008
Adelie Torgersen 34.6 17.2 189 3200 female 2008
Adelie Torgersen 42.9 17.6 196 4700 male 2008
Adelie Torgersen 36.7 18.8 187 3800 female 2008
Adelie Torgersen 35.1 19.4 193 4200 male 2008
Adelie Dream 37.3 17.8 191 3350 female 2008
Adelie Dream 41.3 20.3 194 3550 male 2008
Adelie Dream 36.3 19.5 190 3800 male 2008
Adelie Dream 36.9 18.6 189 3500 female 2008
Adelie Dream 38.3 19.2 189 3950 male 2008
Adelie Dream 38.9 18.8 190 3600 female 2008
Adelie Dream 35.7 18.0 202 3550 female 2008
Adelie Dream 41.1 18.1 205 4300 male 2008
Adelie Dream 34.0 17.1 185 3400 female 2008
Adelie Dream 39.6 18.1 186 4450 male 2008
Adelie Dream 36.2 17.3 187 3300 female 2008
Adelie Dream 40.8 18.9 208 4300 male 2008
Adelie Dream 38.1 18.6 190 3700 female 2008
Adelie Dream 40.3 18.5 196 4350 male 2008
Adelie Dream 33.1 16.1 178 2900 female 2008
Adelie Dream 43.2 18.5 192 4100 male 2008
Adelie Biscoe 35.0 17.9 192 3725 female 2009
Adelie Biscoe 41.0 20.0 203 4725 male 2009
Adelie Biscoe 37.7 16.0 183 3075 female 2009
Adelie Biscoe 37.8 20.0 190 4250 male 2009
Adelie Biscoe 37.9 18.6 193 2925 female 2009
Adelie Biscoe 39.7 18.9 184 3550 male 2009
Adelie Biscoe 38.6 17.2 199 3750 female 2009
Adelie Biscoe 38.2 20.0 190 3900 male 2009
Adelie Biscoe 38.1 17.0 181 3175 female 2009
Adelie Biscoe 43.2 19.0 197 4775 male 2009
Adelie Biscoe 38.1 16.5 198 3825 female 2009
Adelie Biscoe 45.6 20.3 191 4600 male 2009
Adelie Biscoe 39.7 17.7 193 3200 female 2009
Adelie Biscoe 42.2 19.5 197 4275 male 2009
Adelie Biscoe 39.6 20.7 191 3900 female 2009
Adelie Biscoe 42.7 18.3 196 4075 male 2009
Adelie Torgersen 38.6 17.0 188 2900 female 2009
Adelie Torgersen 37.3 20.5 199 3775 male 2009
Adelie Torgersen 35.7 17.0 189 3350 female 2009
Adelie Torgersen 41.1 18.6 189 3325 male 2009
Adelie Torgersen 36.2 17.2 187 3150 female 2009
Adelie Torgersen 37.7 19.8 198 3500 male 2009
Adelie Torgersen 40.2 17.0 176 3450 female 2009
Adelie Torgersen 41.4 18.5 202 3875 male 2009
Adelie Torgersen 35.2 15.9 186 3050 female 2009
Adelie Torgersen 40.6 19.0 199 4000 male 2009
Adelie Torgersen 38.8 17.6 191 3275 female 2009
Adelie Torgersen 41.5 18.3 195 4300 male 2009
Adelie Torgersen 39.0 17.1 191 3050 female 2009
Adelie Torgersen 44.1 18.0 210 4000 male 2009
Adelie Torgersen 38.5 17.9 190 3325 female 2009
Adelie Torgersen 43.1 19.2 197 3500 male 2009
Adelie Dream 36.8 18.5 193 3500 female 2009
Adelie Dream 37.5 18.5 199 4475 male 2009
Adelie Dream 38.1 17.6 187 3425 female 2009
Adelie Dream 41.1 17.5 190 3900 male 2009
Adelie Dream 35.6 17.5 191 3175 female 2009
Adelie Dream 40.2 20.1 200 3975 male 2009
Adelie Dream 37.0 16.5 185 3400 female 2009
Adelie Dream 39.7 17.9 193 4250 male 2009
Adelie Dream 40.2 17.1 193 3400 female 2009
Adelie Dream 40.6 17.2 187 3475 male 2009
Adelie Dream 32.1 15.5 188 3050 female 2009
Adelie Dream 40.7 17.0 190 3725 male 2009
Adelie Dream 37.3 16.8 192 3000 female 2009
Adelie Dream 39.0 18.7 185 3650 male 2009
Adelie Dream 39.2 18.6 190 4250 male 2009
Adelie Dream 36.6 18.4 184 3475 female 2009
Adelie Dream 36.0 17.8 195 3450 female 2009
Adelie Dream 37.8 18.1 193 3750 male 2009
Adelie Dream 36.0 17.1 187 3700 female 2009
Adelie Dream 41.5 18.5 201 4000 male 2009
Gentoo Biscoe 46.1 13.2 211 4500 female 2007
Gentoo Biscoe 50.0 16.3 230 5700 male 2007
Gentoo Biscoe 48.7 14.1 210 4450 female 2007
Gentoo Biscoe 50.0 15.2 218 5700 male 2007
Gentoo Biscoe 47.6 14.5 215 5400 male 2007
Gentoo Biscoe 46.5 13.5 210 4550 female 2007
Gentoo Biscoe 45.4 14.6 211 4800 female 2007
Gentoo Biscoe 46.7 15.3 219 5200 male 2007
Gentoo Biscoe 43.3 13.4 209 4400 female 2007
Gentoo Biscoe 46.8 15.4 215 5150 male 2007
Gentoo Biscoe 40.9 13.7 214 4650 female 2007
Gentoo Biscoe 49.0 16.1 216 5550 male 2007
Gentoo Biscoe 45.5 13.7 214 4650 female 2007
Gentoo Biscoe 48.4 14.6 213 5850 male 2007
Gentoo Biscoe 45.8 14.6 210 4200 female 2007
Gentoo Biscoe 49.3 15.7 217 5850 male 2007
Gentoo Biscoe 42.0 13.5 210 4150 female 2007
Gentoo Biscoe 49.2 15.2 221 6300 male 2007
Gentoo Biscoe 46.2 14.5 209 4800 female 2007
Gentoo Biscoe 48.7 15.1 222 5350 male 2007
Gentoo Biscoe 50.2 14.3 218 5700 male 2007
Gentoo Biscoe 45.1 14.5 215 5000 female 2007
Gentoo Biscoe 46.5 14.5 213 4400 female 2007
Gentoo Biscoe 46.3 15.8 215 5050 male 2007
Gentoo Biscoe 42.9 13.1 215 5000 female 2007
Gentoo Biscoe 46.1 15.1 215 5100 male 2007
Gentoo Biscoe 44.5 14.3 216 4100 NA 2007
Gentoo Biscoe 47.8 15.0 215 5650 male 2007
Gentoo Biscoe 48.2 14.3 210 4600 female 2007
Gentoo Biscoe 50.0 15.3 220 5550 male 2007
Gentoo Biscoe 47.3 15.3 222 5250 male 2007
Gentoo Biscoe 42.8 14.2 209 4700 female 2007
Gentoo Biscoe 45.1 14.5 207 5050 female 2007
Gentoo Biscoe 59.6 17.0 230 6050 male 2007
Gentoo Biscoe 49.1 14.8 220 5150 female 2008
Gentoo Biscoe 48.4 16.3 220 5400 male 2008
Gentoo Biscoe 42.6 13.7 213 4950 female 2008
Gentoo Biscoe 44.4 17.3 219 5250 male 2008
Gentoo Biscoe 44.0 13.6 208 4350 female 2008
Gentoo Biscoe 48.7 15.7 208 5350 male 2008
Gentoo Biscoe 42.7 13.7 208 3950 female 2008
Gentoo Biscoe 49.6 16.0 225 5700 male 2008
Gentoo Biscoe 45.3 13.7 210 4300 female 2008
Gentoo Biscoe 49.6 15.0 216 4750 male 2008
Gentoo Biscoe 50.5 15.9 222 5550 male 2008
Gentoo Biscoe 43.6 13.9 217 4900 female 2008
Gentoo Biscoe 45.5 13.9 210 4200 female 2008
Gentoo Biscoe 50.5 15.9 225 5400 male 2008
Gentoo Biscoe 44.9 13.3 213 5100 female 2008
Gentoo Biscoe 45.2 15.8 215 5300 male 2008
Gentoo Biscoe 46.6 14.2 210 4850 female 2008
Gentoo Biscoe 48.5 14.1 220 5300 male 2008
Gentoo Biscoe 45.1 14.4 210 4400 female 2008
Gentoo Biscoe 50.1 15.0 225 5000 male 2008
Gentoo Biscoe 46.5 14.4 217 4900 female 2008
Gentoo Biscoe 45.0 15.4 220 5050 male 2008
Gentoo Biscoe 43.8 13.9 208 4300 female 2008
Gentoo Biscoe 45.5 15.0 220 5000 male 2008
Gentoo Biscoe 43.2 14.5 208 4450 female 2008
Gentoo Biscoe 50.4 15.3 224 5550 male 2008
Gentoo Biscoe 45.3 13.8 208 4200 female 2008
Gentoo Biscoe 46.2 14.9 221 5300 male 2008
Gentoo Biscoe 45.7 13.9 214 4400 female 2008
Gentoo Biscoe 54.3 15.7 231 5650 male 2008
Gentoo Biscoe 45.8 14.2 219 4700 female 2008
Gentoo Biscoe 49.8 16.8 230 5700 male 2008
Gentoo Biscoe 46.2 14.4 214 4650 NA 2008
Gentoo Biscoe 49.5 16.2 229 5800 male 2008
Gentoo Biscoe 43.5 14.2 220 4700 female 2008
Gentoo Biscoe 50.7 15.0 223 5550 male 2008
Gentoo Biscoe 47.7 15.0 216 4750 female 2008
Gentoo Biscoe 46.4 15.6 221 5000 male 2008
Gentoo Biscoe 48.2 15.6 221 5100 male 2008
Gentoo Biscoe 46.5 14.8 217 5200 female 2008
Gentoo Biscoe 46.4 15.0 216 4700 female 2008
Gentoo Biscoe 48.6 16.0 230 5800 male 2008
Gentoo Biscoe 47.5 14.2 209 4600 female 2008
Gentoo Biscoe 51.1 16.3 220 6000 male 2008
Gentoo Biscoe 45.2 13.8 215 4750 female 2008
Gentoo Biscoe 45.2 16.4 223 5950 male 2008
Gentoo Biscoe 49.1 14.5 212 4625 female 2009
Gentoo Biscoe 52.5 15.6 221 5450 male 2009
Gentoo Biscoe 47.4 14.6 212 4725 female 2009
Gentoo Biscoe 50.0 15.9 224 5350 male 2009
Gentoo Biscoe 44.9 13.8 212 4750 female 2009
Gentoo Biscoe 50.8 17.3 228 5600 male 2009
Gentoo Biscoe 43.4 14.4 218 4600 female 2009
Gentoo Biscoe 51.3 14.2 218 5300 male 2009
Gentoo Biscoe 47.5 14.0 212 4875 female 2009
Gentoo Biscoe 52.1 17.0 230 5550 male 2009
Gentoo Biscoe 47.5 15.0 218 4950 female 2009
Gentoo Biscoe 52.2 17.1 228 5400 male 2009
Gentoo Biscoe 45.5 14.5 212 4750 female 2009
Gentoo Biscoe 49.5 16.1 224 5650 male 2009
Gentoo Biscoe 44.5 14.7 214 4850 female 2009
Gentoo Biscoe 50.8 15.7 226 5200 male 2009
Gentoo Biscoe 49.4 15.8 216 4925 male 2009
Gentoo Biscoe 46.9 14.6 222 4875 female 2009
Gentoo Biscoe 48.4 14.4 203 4625 female 2009
Gentoo Biscoe 51.1 16.5 225 5250 male 2009
Gentoo Biscoe 48.5 15.0 219 4850 female 2009
Gentoo Biscoe 55.9 17.0 228 5600 male 2009
Gentoo Biscoe 47.2 15.5 215 4975 female 2009
Gentoo Biscoe 49.1 15.0 228 5500 male 2009
Gentoo Biscoe 47.3 13.8 216 4725 NA 2009
Gentoo Biscoe 46.8 16.1 215 5500 male 2009
Gentoo Biscoe 41.7 14.7 210 4700 female 2009
Gentoo Biscoe 53.4 15.8 219 5500 male 2009
Gentoo Biscoe 43.3 14.0 208 4575 female 2009
Gentoo Biscoe 48.1 15.1 209 5500 male 2009
Gentoo Biscoe 50.5 15.2 216 5000 female 2009
Gentoo Biscoe 49.8 15.9 229 5950 male 2009
Gentoo Biscoe 43.5 15.2 213 4650 female 2009
Gentoo Biscoe 51.5 16.3 230 5500 male 2009
Gentoo Biscoe 46.2 14.1 217 4375 female 2009
Gentoo Biscoe 55.1 16.0 230 5850 male 2009
Gentoo Biscoe 44.5 15.7 217 4875 NA 2009
Gentoo Biscoe 48.8 16.2 222 6000 male 2009
Gentoo Biscoe 47.2 13.7 214 4925 female 2009
Gentoo Biscoe NA NA NA NA NA 2009
Gentoo Biscoe 46.8 14.3 215 4850 female 2009
Gentoo Biscoe 50.4 15.7 222 5750 male 2009
Gentoo Biscoe 45.2 14.8 212 5200 female 2009
Gentoo Biscoe 49.9 16.1 213 5400 male 2009
Chinstrap Dream 46.5 17.9 192 3500 female 2007
Chinstrap Dream 50.0 19.5 196 3900 male 2007
Chinstrap Dream 51.3 19.2 193 3650 male 2007
Chinstrap Dream 45.4 18.7 188 3525 female 2007
Chinstrap Dream 52.7 19.8 197 3725 male 2007
Chinstrap Dream 45.2 17.8 198 3950 female 2007
Chinstrap Dream 46.1 18.2 178 3250 female 2007
Chinstrap Dream 51.3 18.2 197 3750 male 2007
Chinstrap Dream 46.0 18.9 195 4150 female 2007
Chinstrap Dream 51.3 19.9 198 3700 male 2007
Chinstrap Dream 46.6 17.8 193 3800 female 2007
Chinstrap Dream 51.7 20.3 194 3775 male 2007
Chinstrap Dream 47.0 17.3 185 3700 female 2007
Chinstrap Dream 52.0 18.1 201 4050 male 2007
Chinstrap Dream 45.9 17.1 190 3575 female 2007
Chinstrap Dream 50.5 19.6 201 4050 male 2007
Chinstrap Dream 50.3 20.0 197 3300 male 2007
Chinstrap Dream 58.0 17.8 181 3700 female 2007
Chinstrap Dream 46.4 18.6 190 3450 female 2007
Chinstrap Dream 49.2 18.2 195 4400 male 2007
Chinstrap Dream 42.4 17.3 181 3600 female 2007
Chinstrap Dream 48.5 17.5 191 3400 male 2007
Chinstrap Dream 43.2 16.6 187 2900 female 2007
Chinstrap Dream 50.6 19.4 193 3800 male 2007
Chinstrap Dream 46.7 17.9 195 3300 female 2007
Chinstrap Dream 52.0 19.0 197 4150 male 2007
Chinstrap Dream 50.5 18.4 200 3400 female 2008
Chinstrap Dream 49.5 19.0 200 3800 male 2008
Chinstrap Dream 46.4 17.8 191 3700 female 2008
Chinstrap Dream 52.8 20.0 205 4550 male 2008
Chinstrap Dream 40.9 16.6 187 3200 female 2008
Chinstrap Dream 54.2 20.8 201 4300 male 2008
Chinstrap Dream 42.5 16.7 187 3350 female 2008
Chinstrap Dream 51.0 18.8 203 4100 male 2008
Chinstrap Dream 49.7 18.6 195 3600 male 2008
Chinstrap Dream 47.5 16.8 199 3900 female 2008
Chinstrap Dream 47.6 18.3 195 3850 female 2008
Chinstrap Dream 52.0 20.7 210 4800 male 2008
Chinstrap Dream 46.9 16.6 192 2700 female 2008
Chinstrap Dream 53.5 19.9 205 4500 male 2008
Chinstrap Dream 49.0 19.5 210 3950 male 2008
Chinstrap Dream 46.2 17.5 187 3650 female 2008
Chinstrap Dream 50.9 19.1 196 3550 male 2008
Chinstrap Dream 45.5 17.0 196 3500 female 2008
Chinstrap Dream 50.9 17.9 196 3675 female 2009
Chinstrap Dream 50.8 18.5 201 4450 male 2009
Chinstrap Dream 50.1 17.9 190 3400 female 2009
Chinstrap Dream 49.0 19.6 212 4300 male 2009
Chinstrap Dream 51.5 18.7 187 3250 male 2009
Chinstrap Dream 49.8 17.3 198 3675 female 2009
Chinstrap Dream 48.1 16.4 199 3325 female 2009
Chinstrap Dream 51.4 19.0 201 3950 male 2009
Chinstrap Dream 45.7 17.3 193 3600 female 2009
Chinstrap Dream 50.7 19.7 203 4050 male 2009
Chinstrap Dream 42.5 17.3 187 3350 female 2009
Chinstrap Dream 52.2 18.8 197 3450 male 2009
Chinstrap Dream 45.2 16.6 191 3250 female 2009
Chinstrap Dream 49.3 19.9 203 4050 male 2009
Chinstrap Dream 50.2 18.8 202 3800 male 2009
Chinstrap Dream 45.6 19.4 194 3525 female 2009
Chinstrap Dream 51.9 19.5 206 3950 male 2009
Chinstrap Dream 46.8 16.5 189 3650 female 2009
Chinstrap Dream 45.7 17.0 195 3650 female 2009
Chinstrap Dream 55.8 19.8 207 4000 male 2009
Chinstrap Dream 43.5 18.1 202 3400 female 2009
Chinstrap Dream 49.6 18.2 193 3775 male 2009
Chinstrap Dream 50.8 19.0 210 4100 male 2009
Chinstrap Dream 50.2 18.7 198 3775 female 2009

Columns

You can arrange content in columns using Pandoc’s fenced div blocks.

::: {.columns}
                                        
::: {.column width="50%"}
This is the left column. You can put text, images, or code here.
:::
                                          
::: {.column width="50%"}
This is the right column.
:::
                                          
:::

Here is a 30/70 split:

Here we have the first four rows of the Palmer Penguins Data set.

penguins %>% head(4) %>% gt()
species island bill_length_mm bill_depth_mm flipper_length_mm body_mass_g sex year
Adelie Torgersen 39.1 18.7 181 3750 male 2007
Adelie Torgersen 39.5 17.4 186 3800 female 2007
Adelie Torgersen 40.3 18.0 195 3250 female 2007
Adelie Torgersen NA NA NA NA NA 2007

Code and Output

One of Quarto’s best features is its ability to seamlessly include code and its output.

Displaying Code and Output

```{r}
#| echo: true
#| eval: true
library(palmerpenguins)
summary(penguins)
```
  • #| echo: true shows the code.
  • #| eval: true runs the code and shows the output.

Code Output Layout

You can control where the output of a code block appears.

  • #| output-location: beside places output next to the code.
  • #| output-location: slide places output on a new slide following the code slide.
  • #| output-location: column places output in a column adjacent to the code.

Revealing Code Stepwise

You can reveal code and its output incrementally.

  • #| output-location: fragment delays showing output until advancing with a click.
  • #| output-location: column-fragment places output in a column adjacent to the code and delays showing until advancing with a click.
```{r}
#| echo: true
#| output-location: "fragment"
x <- 3
y <- 2
x + y
x*y
```

Each line will appear on a subsequent click.

x <- 3
y <- 2
x + y
[1] 5
x*y
[1] 6

Exercise 1a: Your First Presentation

  • Create a new Quarto Presentation project.
  • Customize the title slide with your name, a subtitle, and your institution.
    • Hint: there are subtitle, author, institute options in YAML
  • Create 3 new slides, with some R code and output.
  • Create at least one main title slide with no text and observe the behavior of the resulting outline.

Advanced Code Display

You can control how code is presented.

Highlighting Code

Use code-line-numbers to highlight specific lines.

```{r}
#| code-line-numbers: "3,5-6"
x <- 1
y <- 2
z <- x + y

a <- "hello"
b <- "world"
paste(a, b)
```
x <- 1
y <- 2
z <- x + y

a <- "hello"
b <- "world"
paste(a, b)
[1] "hello world"

Collapsing Code

Use code-fold: true to make code blocks expandable.

```{r}
#| code-fold: true
#| echo: true
print("This code is hidden by default.")
```
Code 
print("This code is hidden by default.")
[1] "This code is hidden by default."

More Content Layout

Incremental Lists

Lists can be displayed incrementally:

::: incremental
-   First item
-   Second item
-   Third item
:::
  • First item
  • Second item
  • Third item


Insert pauses to make other types of content display incrementally with <br/>.

Learn more: Incremental Lists

Incremental Reveals

More customization to show parts of a slide step-by-step can be made with the .fragment class. This works on lists, text, images, and more.

::: {.fragment}
Fade in
:::

::: {.fragment .fade-out}
Fade out
:::

::: {.fragment .highlight-red}
Highlight red
:::

Fade in

Fade out

Highlight red

Learn more: Fragments

Exercise 1b: Your First Presentation

  • On one slide, add a bulleted list where each item is revealed incrementally.
  • On another slide, use columns to display text on the left and an image on the right. (Hint: Use ![Caption](image.png) to add an image).

Styling Your Presentation

Themes

You can change the entire look of your presentation with themes.

---
title: "My Presentation"
format:
  revealjs:
    theme: sky
---
  • Available themes are: default, beige, blood, dark, default, dracula, league, moon, night, serif, simple, sky, solarized
  • Example of themes below are from https://revealjs.com/themes/.
    • The theme .scss files can be downloaded from github.

Custom Styles with SCSS

For more control, you can use a .scss file to customize your theme.

  1. Create a file named custom.scss.
  2. In this file, you can define variables and CSS rules, including changing font color:
/*-- scss:defaults --*/
$presentation-heading-font: "Montserrat", sans-serif;
$theme-green: #40ab16;

/*-- scss:rules --*/
.reveal .slide-background-content {
background-color: #F0F0F0;
}
  1. Link it in your YAML:
---
format:
  revealjs:
    theme: [default, custom.scss]
---

Customizing the Title Slide

You can add more information to your title slide directly in the YAML header. This is useful for adding affiliations, subtitles, and logos.

---
title: "Workshop Title"
subtitle: "An In-depth Look at Quarto"
author: "Your Name"
institute: "Oregon Health & Science University"
date: "today"
title-slide-attributes:
  data-background-image: "your-logo.png"
  data-background-size: "15%"
  data-background-position: "top right"
format: revealjs
---

Markup & Fine-Tuning

  • Adjust font size at different levels: part of a slide, entire slide, or entire document

Font Size: Part of a slide

Wrap text in square brackets and use a class like .smaller or .larger.


This is [small text]{.smaller} and this is [large text]{.larger}.

This is small text and this is large text.


(Note: If this doesn’t work, make sure your theme or .scss file defines these classes)

  • Place text within a fenced div specifying the font-size.
  • This option gives more flexibility setting the font size.

Example 1: font size specified in points

::: {style="font-size: 14pt;"}
Text is set at 14 pt. 
:::

Text is set at 14 pt. 

Example 2: font size as a percent

::: {style="font-size: 75%;"}
Text is at 75% of the default font size. 
:::

Text is at 75% of the default font size.

Auto-fit text size

  • Use the {.r-fit-text} class to auto-fit text size to fill the slide.
  • Header: it makes the header fill one line by either increasing or decreasing the font size.
    • Note: I usually have to render the slides twice to get this to work correctly
## [Auto-fit text size]{.r-fit-text}
  • Body text: The words “Big Text” below were auto-fit to the slide width.
    • Place text within a fenced div with the class {.r-fit-text}.
::: {.r-fit-text}
Big Text
:::

Big Text

Font Size: Entire Slide

  • Apply {.smaller} or {.larger} to an entire slide
    • to make all the text on the slide smaller or bigger,
    • by adding the class to the end of the header.
  • Note that it also makes the header smaller or larger.


  • For example, the header above was coded as:
## Font Size: Entire Slide{.larger}

Font Size: Entire Document

Use the font-size option in your YAML header.

format:
  revealjs:
    font-size: 24px

Customizing Text Styles

For more specific control over fonts for headers or code, you can use a custom .scss file.

  • Slide Headers Font Size: Change heading sizes in custom.scss:
$presentation-h1-font-size: 2.5em;
$presentation-h2-font-size: 1.6em;
  • Code vs. Output Font Size: Adjust code block and output font sizes in custom.scss.
$code-block-font-size: 0.55em;

Text color

  • The default text color is determined by the theme of the document.

  • You can change individual bits of text by placing square brackets around the text to modify and applying the style class for color to it.

The sentence above was coded as:

[You can change]{style="color:red"} 
[individual bits of text]{style="color:blue"} 
[by placing square brackets]{style="color:purple"} 
[around the text to modify]{style="color:#27a710"} 
[and applying the style class for color to it]{style="color:#CC5500"}.
  • Note that the
    • first three colors were specified by name (i.e. red, blue, purple), and the
    • last two colors were specified by hexadecimal values
  • The actual shades of the “named” colors are determined by the theme applied to the slides.
    • The scss file for the theme can be modified to change the colors using hexadecimal values.
  • Use a Hexadecimal color picker to select your favorite colors

Slide background

  • The background of a slide can be customized as well
    • color
    • image
    • video
    • and more!
  • Learn more at Quarto’s Slide Backgrounds reference page.


  • The background of this slide was change by adding {background-color="orange"} to the end of the header:
## Slide background {background-color="orange"}

ggplot figures

ggplot: themes & text size

  • The default ggplot theme (theme_grey()) has a grey figure background and font size 11 pt. 
    • The x- and y-axis labels are 11 pt font, and
    • the other text (axis numbers, title, etc.) are sized relatively to the label size.
ggplot(penguins, aes(x=bill_length_mm, y=flipper_length_mm, color=species)) +
  geom_point() + labs(title = " Penguin flipper length vs. bill length")

  • Below we change the font size to 22 pt and keep the default theme_grey()
  • The larger font size makes it easier to read labels in presentations.
ggplot(penguins, aes(x=bill_length_mm, y=flipper_length_mm, color=species)) +
  geom_point() + labs(title = " Penguin flipper length vs. bill length") +
  theme_gray(base_size = 22)

  • Below we change the theme to theme_bw() for a “clean” look and
    • adjust the font size to 22 pt
ggplot(penguins, aes(x=bill_length_mm, y=flipper_length_mm, color=species)) +
  geom_point() + labs(title = " Penguin flipper length vs. bill length") + 
  theme_bw(base_size = 22)

  • If a presentation had many figures, then it is easier to set the desired gpplot customizations at the beginning of the qmd file.
  • Right after the YAML, we typically have a “setup” code chunk to load R packages and specify settings for the rest of the file.
  • This is where we can set ggplot customizations using the theme_set() function:
```{r}
#| label: "setup" 
#| include: false
#| message: false
#| warning: false

library(tidyverse)    
library(gt)
library(palmerpenguins)

# Change the theme to theme_bw and change the font size
theme_set(theme_bw(base_size = 22)
```

ggplot figure size

  • The default figure size in revealjs slides is 9” x 5”
    • See here for default sizes for other output types.
  • The defaults can be changed with fig-width and fig-height

If set in the YAML, they new sizes are applied to the whole document

---
title: "Slides for presentation"
format: 
  revealjs:
    fig-width: 6
    fig-height: 4
---
  • Use fig-width and fig-height as code chunk options
  • Note that a line break was added to the figure title using \n
```{r}
#| fig-width: 6
#| fig-height: 4

ggplot(penguins, aes(x=bill_length_mm, y=flipper_length_mm, color=species)) +
  geom_point() + labs(title = " Penguin flipper length vs. \n bill length") + 
  theme_bw(base_size = 20)
```

More Advanced

There are many, many advanced tools and options shown in the Quarto presentation, advanced documentation.

Exercise 2: Code and Customization

  • On a new slide, add an R code chunk that loads the palmerpenguins dataset and creates a gt table.
  • Make the code chunk collapsible (code-fold: true).
  • Highlight the line of code that creates the gt table.
  • Change the presentation theme to solarized.
  • Create a custom.scss file and use it to change the color of the H2 slide titles to a color of your choice.

Presentation Tools

revealjs comes with powerful tools to enhance your presentations.

More about presenter tools can be found on the Quarto.org docs website

Fullscreen mode

  • Switch to full screen mode when presenting by pressing the F key.


  • Press esc to exit back to your web browser.

Speaker Notes

Press s to open the speaker view, which shows your notes and a preview of the next slide. Add notes to a slide like this:

## My Slide
    
This is the content everyone sees.
    
::: {.notes}
These are my speaker notes. Only I can see them.
:::

To show notes and present in “speaker mode” press s.

Speaker Notes Slide

This is the content everyone sees. To show notes and present in “speaker mode” press s.

Annotations & Chalkboard ✍️

Revealjs includes a “chalkboard” that you can use for live drawings and a “notes canvas” for more permanent annotations.

  • Chalkboard:
    • Press b to toggle the chalkboard. You can draw directly on the slide. Press b again to hide it.
    • Or, click on the chalkboard icon on the bottom left of the slides
  • Notes Canvas:
    • Press c to toggle the notes canvas. This is like drawing on a transparent overlay that stays with the slide.
    • Or, click on the paintbrush icon on the bottom left of the slides

Add the chalkboard option in the YAML header to include both the chalkboard and canvas options in your slides, :

---
format: 
  revealjs:
      chalkboard: true
---

Saving & Loading Annotations:

Your drawings are not saved by default. To save them:

  • While in presentation mode, press d to download your drawings as a drawing.json file.
  • To load these annotations back the next time you present, add the chalkboard-src: option to your YAML header:
---
format:
  revealjs:
    chalkboard-src: "drawing.json"
---

Learn more at Quarto’s Presenting Slides > Chalkboard

Adding a Countdown Timer ⏳

  • A great way to manage time for in-class exercises or breaks is to add a countdown timer directly into your slides.
  • Below we use the countdown package, which we installed earlier.

Let’s set a 1-minute timer:

countdown::countdown(minutes = 1, play_sound = TRUE)
01:00

This will embed a timer on the slide. You can customize the duration, text, colors, and whether it plays a sound when finished.

Slide File Formats

Quarto supports a variety of formats for creating presentations, including:

To choose these, merely need to change the yaml format: to the type of talk you wish to produce, for example:

---
title: "Mathy Talk"
author: "Jane Doe"
format: beamer
---

HTML Slides

From Quarto Docs: Presentations: There are pros and cons to each of these formats. The most capable format by far is revealjs, so it is highly recommended unless you have specific Office or LaTeX output requirements. Note that revealjs presentations can be presented as HTML slides or can be printed to PDF for easier distribution.

Citations and References

Setting Up Bibliography

Step 1: Add to YAML header

---
title: "My Presentation"
format: revealjs
bibliography: references.bib
csl: apa.csl
---

(Use csl only if you have a custom csl file, see Citations)

Step 2: Create references.bib

@article{smith2023,
  title={Important Research},
  author={Smith, John},
  journal={Journal of Science},
  year={2023}
}

Citation Syntax

In-text citations:

Research shows [@smith2023] that...
Multiple sources [@smith2023; @jones2022]
Page numbers [@smith2023, p. 15]

Citation styles:

  • [@smith2023] → (Smith, 2023)
  • @smith2023 → Smith (2023)
  • [-@smith2023] → (2023)

Here we reference (Smith 2023).

References Slide

Automatic references:

## References

::: {#refs}
:::

Manual placement:

---
suppress-bibliography: true
---

# Last slide
## References {.smaller}

::: {#refs}
:::

References

Smith, John. 2023. “Important Research.” Journal of Science.

Learn more at Quarto Citations

Exporting

Publishing

We will briefly cover publishing webpages to Quarto Pubs and GitHub in Part 4 of the slides.

Self Contained (HTML)

HTML documents typically have a number of external dependencies (e.g. images, CSS style sheets, JavaScript, etc.). By default these dependencies are placed in a _files directory alongside your document. For example, if you render report.qmd to HTML:

Then the following output is produced:

pres.html
pres_files/

You might alternatively want to create an entirely self-contained HTML document (with images, CSS style sheets, JavaScript, etc. embedded into the HTML file). You can do this by specifying the embed-resources option:

format:
  revealjs:
    embed-resources: true

This will produce a standalone HTML file with no external dependencies, using data: URIs to incorporate the contents of linked scripts, style sheets, images, and videos. The resulting file should be self contained, in the sense that it needs no external files and no net access to be displayed properly by a browser.

From Quarto docs

Converting HTML to PDF

Method 1: Using Chrome/Chromium

# Install chromium if needed
quarto install chromium

# Render to PDF
quarto render presentation.qmd --to revealjs
# Then use browser print function
# Or use decktape (next slide)

Method 2: Using Decktape

# Install decktape
npm install -g decktape

# Convert HTML to PDF
decktape reveal presentation.html presentation.pdf

# With custom options
decktape reveal presentation.html presentation.pdf \
  --size 1920x1080 --load-pause 2000

Method 3: Direct PDF Format

---
title: "My Presentation"
format:
  revealjs: default
  pdf: default
---
# Render both formats
quarto render presentation.qmd

Converting Qmd Reports to Slides

From Document to Presentation

Step 1: Change the YAML header

# From this:
format: html

# To this:
format: revealjs

Step 2: Adjust heading levels

  • # becomes section dividers
  • ## becomes slide titles
  • ### becomes slide subtitles

Content Adaptation Tips

  • Break long paragraphs into bullet points
  • Split dense content across multiple slides
  • Add slide breaks with --- if needed
  • Use incremental reveals with {.incremental}
::: {.incremental}
- First point
- Second point
- Third point
:::

Example Conversion

Before (Report):

# Analysis Results
Our analysis shows significant findings...

## Data Summary
The dataset contains 1000 observations...

After (Slides):

# Analysis Results

## Key Findings
- Significant results discovered
- Strong correlations identified

## Data Summary
- 1000 observations
- 15 variables analyzed