Seven tips for creating Quarto revealjs presentations

Introduction

Like alot of lecturers I’m teaching at the moment. If I have a presentation to do that’s mainly images I’ll use Powerpoint or Google Slides. If the presentation includes maths or code or both I used to use LaTeX Beamer. Over the years I have grown tired of Beamer and so I thought I’d try making some revealjs presentations using Quarto.

Revealjs has been around far longer than Quarto, I remember seeing a colleague present using revealjs in about 2012, and you can happily make a revealjs presentation without Quarto. However, the convenience of writing in the Quarto Markdown format is fantastic.

To learn the basics of making revealjs slides with Quarto I recommend reading the user guide. And full documentation is available here and here.

The following tips are solutions to little hurdles that I found I needed to overcome when making my first revealjs presentations using Quarto.

1. Slide size and testing on a smaller display size on your own monitor

The great thing about making a presentation in Powerpoint or Google Slides is that you can instantly see if your content fits on a slide. So it helps to have an understanding of how big a slide is. By default a revealjs slide is 1050px wide by 700px tall. This helps you when setting the size of figures and code blocks.

Additionally it is helpful to be able to preview your slides on the size on monitor you will be presenting on. My University has 1080p monitors in most lecture theatres, however, my monitor is bigger than that. Chrome allows setting the size of the display by opening Developer Tools (Three dots | More tools | Developer Tools). Then you can enter the desired resolution in the top bar as follows (a 1080p screen is 1080 pixels tall and 1920 pixels wide).

I find this especially helpful when working on a Mac, whose laptops often have unusual screen resolutions.

2. Wider width cutoff in code chunks

Vertical space on a slide is at a premium. Therefore, in a presentation I line break my code wider that I do when coding normally. As described in the RMarkdown cookbook and in this GitHub issue we can enable the use of the formatR package on a code chunk using the tidy and tidy-opts chunk options (I think the default is 85 characters, so I choose a value greater than that. I find that 110 is about the widest I can set).

```{r}
#| tidy: TRUE
#| tidy-opts: !expr list(width.cutoff = I(110))
# ... Wide R code here ...
```

We can also set these globally for the Quarto document in either the YAML header,

knitr:
  opts_chunk: 
    tidy: TRUE
    tidy-opts: !expr list(width.cutoff = I(110))

or in a chunk at the top of your Quarto document.

```{r}
#| include: false
knitr::opts_chunk$set(tidy = TRUE, tidy.opts = list(width.cutoff = I(110)))
```

3. Taller code chunks

Code chunks come in several flavours in a rendered presentation. There are code input chunks, code output chunks, and chunks for any code output errors. To make the input code chunks taller there is a convenient Quarto option code-block-height which is specified in the YAML header (the default is 500px, so pick a value greater than that).

---
format:
  revealjs:
    code-block-height: 650px
---

4. Taller code output chunks

Currently, there doesn’t seem to be a Quarto option to make the code output chunks taller. Therefore I had to inspect the source code of the html slides to find out how to modify this. In most browsers simply right click on a slide and in Chrome click Inspect – do this over the element on the page you want to find out about.

Doing so over a code output cell shows the developer tools on the right handside. We can then see that the elements and classes for the code output cell are given just above the bottom right pane, i.e., div.cell div.cell-output.cell-output-stdout pre code.

Therefore, we can make the code output cell have a taller maximum height by specifying max-height as follows in a CSS file which we reference in the YAML header. Note that the default is 400px, so choose a value larger than that.

---
format:
  revealjs:
    css: custom.css
---

The contents of custom.css use the elements and classes of the code chunk we discovered as follows.

.cell .cell-output-stdout pre code {
  max-height: 650px; // Adjust this value as needed
  overflow-y: auto; // Add this to handle overflow
}

5. Embedding interactive Mentimeter presentations

Mentimeter provides the html code required to embed a presentation within an html document. To obtain this, go into a presentation and click the Share button, then select the Slides tab, then click Copy code under Embed slides.

This results in a div containing an iframe, which we can simply paste in as the content of our slide (I have added the line breaks and replaced part of the URL to my presentation with hashes).

## My slide with an embedded Menti

But when I first rendered a presentation using this code I didn’t see my Mentimeter presentation in the relevant slide but rather the following spinning dots.

Thanks to this post it turns out this is because I had specified embed-resources: true in my revealjs options in the YAML header. When you do this you need to add the data-external="1" attribute to the iframe as detailed in the Quarto documentation as follows.

6. Disable HTML table processing for some tables

There are now so many fantastic R packages for html table generation. My two favourite are gtsummary and sjPlot. However, I notice that for some sjPlot tables Quarto issues the following warning when rendering the slides.

WARNING (/Applications/quarto/share/filters/main.lua:9319) Unable to parse table from raw html block: skipping.

To avoid this it’s possible to disable Quarto’s html table processing using the html-table-processing argument either at the document or chunk level. Here is an example slide doing so at the chunk level.

## Slide presenting a multilevel model

```{r}
#| html-table-processing: none
library(sjPlot)
library(lme4)
fm1 <- lmer(Reaction ~ Days + (Days | Subject), sleepstudy)
tab_model(fm1)
```

7. Programmatic rendering and pdf export for printing

To render a Quarto document we can click the Render button in RStudio, but I find it easier to make a render.R script with a call to the quarto package’s quarto_render() function.

It’s helpful to provide students with a pdf copy of the slides for printing. You can do this in a browser through the print menu or programmatically using pagedown’s chrome_print() function. When I called this function with no options the page size of the pdf was unusual, producing pages with neither A4 nor US paper size, so I call it as follows to ensure an A4 page size.

Therefore, my render.R script often looks something like the following.

quarto::quarto_render(input = "my-great-slides.qmd")

pagedown::chrome_print("my-great-slides.html", 
  options = 
    list(
      printBackground = FALSE,
      preferCSSPageSize = FALSE, 
      paperWidth = 8.3, paperHeight = 11.7, 
      marginTop = 0.1, marginBottom = 0.1, 
      marginLeft = 0.1, marginRight = 0.1))

I usually find that a few slides have slightly too much content for an A4 page, and so those slides will take up 2 pages in the pdf. And hence the pdf usually has a few more pages than the number of slides.

Summary

I have shown seven tips that I needed to workout when making revealjs presentations with Quarto.