Exercise: Slides
Overview
In this exercise, we’ll focus on creating interactive slides using Quarto. You can use either the quarto-webr or quarto-pyodide extension for this.
Step-by-step
Step into a Quarto Project
Ensure you’re working within a Quarto Project in RStudio or VS Code. If you need help setting up a Quarto project or re-entering the existing Quarto project, please refer back to our first exercise or raise your hand.
Install the Quarto Extension
For new Quarto projects, please make sure to install the Quarto extension into the project by typing into the Terminal tab:
quarto add coatless/quarto-webr
quarto add coatless-quarto/pyodide
If you wish to also use the stanford RevealJS theme, please also install the quarto-stanford theme extension:
quarto add coatless-quarto/stanford
Create a new Quarto Document
Next, please create a new Quarto document.
Modify the document YAML
To have interactive slides, we must use the Quarto Revealjs format. Other presentation formats will not work as they are not constructed with HTML.
Here’s the default document header YAML that you need to use:
---
title: "Example RevealJS Slides"
subtitle: "Let's Rock and Roll!"
date: now
author:
- name: FirstName LastName
email: person@stanford.edu
format:
revealjs: default
---
If you wish to use the Stanford theme, please change the line under format
to:
format:
stanford-revealjs: default
Modify the document header
Next, please modify the document header include the necessary filters
---
engine: knitr
filters:
- webr
---
---
filters:
- pyodide
---
Removing the startup message
Sometimes it may not be ideal to display a message on the title slide covering the status of webR or Pyodide. This can be disabled with show-startup-message: false
under the relevant document key.
---
webr:
show-startup-message: false
---
---
pyodide:
show-startup-message: false
---
Create a new slide
By default, Revealjs uses header markdown syntax to denote sections of the slide deck and slides themselves.
A single #
will create a new slide section while two ##
will generate a new slide. If you add three ###
or more, then the slide will start to have subheaders.
# Section
## My Slide Title
Some slide contents
### Subsection
Some more details...
Place an interactive code area
Next, create a slide that has an interactive code area present.
## My slide
Let's take a look at ...
```{webr-r}
# R code here
```
## My slide
Let's take a look at ...
```{pyodide-python}
# Python code here
```
Render the document
Finally, please render the slide deck.