Quarto reveal.js clean

A minimal and elegant presentation theme

Danilo Freire
danilo.freire@emory.edu

Emory University

03 November, 2024

Example slide

This is a subtitle

Before we dive a bit deeper, here is a simple example of the clean theme in action.

  • No pictures or anything fancy. Just text for the moment.

Next, we’ll take a brief tour of some theme components.

  • We’ll use the same basic structure as the original LaTeX slides.
  • Note that the full suite of Reveal.js features are available for this Quarto implementation, even if we don’t cover everything here.

Before you proceed…

Requirements for the coding examples in this demo

R libraries

While the clean theme is language agnostic, we will use several R coding examples in this demo to highlight some advanced theme features.

You will need the following libraries if you’d like to render the template “as-is”:

install.packages(c("modelsummary", "gt", "fixest", "pdftools", "tinytex", "threejs"))

TinyTex

While reveal.js presentations are HTML format, we will show an example of how to embed LaTeX tables as images. This requires a working Tex distribution, of which TinyTex provides by far the easiest and lightest integration with Quarto. More details here.

quarto install tinytex

Components

Components

Ordered and Unordered Lists

Here we have an unordered list.

  • first item
    • sub-item
  • second item

And next we have an ordered one.

  1. first item
    1. sub-item
  2. second item

Components

Alerts & Cross-refs

To emphasize specific words or text, you can:

  • Use the default .alert class, e.g. important note.
  • Use the .fg class for custom colour, e.g. important note.
  • Use the .bg class for custom background, e.g. important note.

Components

Animate elements with .fragment

Fragments are a way to animate elements onto the slide.

Fade in

Semi fade out

Fade out

Highlight red


Components

Nested fragments

Fragments can also be nested.

Fade in > Highlight red > Highlight blue > Semi fade out

Fade in > Highlight red > Semi fade out

Components

Cross-references & Citations

To cross-reference, you have several options, for example:

  • Beamer-like .button class provided by this theme, e.g. Appendix
  • Quarto’s native cross-ref syntax, e.g., “See Section 8.3.”

Citations follow the standard Quarto format and be sourced from BibLaTex, BibTeX, or CLS files. For example:

Components

Blocks

Quarto provides dedicated environments for theorems, lemmas, and so forth.

But in presentation format, it’s arguably more effective just to use a Callout Block.

Regression Specification

The main specification is as follows:

\[ y_{it} = X_{it} \beta + \mu_i + \varepsilon_{it} \]

Components

Multicolumn I: Text only

Column 1

Here is a long sentence that will wrap onto the next line as it hits the column width, and continue this way until it stops.

Column 2

Some other text in another column.

A second paragraph.

Multicolumn support is very flexible and we can continue with a single full span column in the same slide.

Components

Multicolumn II: Text and figures

Text about the figure

  • A point about the figure that is potentially important.
  • Another point about the figure that is also potentially important.

Note that sub- and multi-panel figures are also natively supported by Quarto. See here.

Components

Multicolumn III: Code and output

Figure 1: Pairwise scatterplot

Components

Multicolumn IV: Code and output with tabset

Figure 2: Pairwise scatterplot 
# Set the palette
sns.set_palette("tab10")

# Set the font family and other parameters
rcParams['font.family'] = 'sans-serif'
rcParams['font.sans-serif'] = ['HersheySans']
rcParams['axes.labelsize'] = 12
rcParams['axes.titlesize'] = 14
rcParams['xtick.labelsize'] = 10
rcParams['ytick.labelsize'] = 10

# Load the iris dataset
iris = sns.load_dataset("iris")

# Create the pairwise scatterplot
sns.pairplot(iris, hue="species", markers=["o", "s", "D"])

# Show the plot
plt.show()
Figure 3

Tables

Tables

Regression example

Quarto offers excellent table support, with further customization via user libraries. Let’s illustrate with a regression example:

import statsmodels.api as sm
import statsmodels.formula.api as smf
import pandas as pd

# Example data
data = {
    'rating': [1, 2, 3, 4, 5],
    'complaints': [1, 2, 3, 4, 5],
    'privileges': [1, 2, 3, 4, 5],
    'learning': [1, 2, 3, 4, 5],
    'raises': [1, 2, 3, 4, 5],
    'critical': [1, 2, 3, 4, 5],
    'advance': [1, 2, 3, 4, 5]
}
attitude = pd.DataFrame(data)

# Fit the model
formula = 'rating ~ complaints + privileges + learning + raises + critical + advance'
model = smf.ols(formula=formula, data=attitude).fit()

# Coefficient mapping dictionary
coef_map = {
    "rating": "Overall Rating",
    "complaints": "Handling of Complaints",
    "privileges": "No Special Privileges",
    "learning": "Opportunity to Learn",
    "raises": "Performance-Based Raises",
    "critical": "Too Critical",
    "advance": "Advancement"
}

Regression table

Table 1: Regression results for the attitude dataset
Dependent variable: rating
(1)
Intercept0.000
(0.000)
Advancement0.167***
(0.000)
Handling of Complaints0.167***
(0.000)
Too Critical0.167***
(0.000)
Opportunity to Learn0.167***
(0.000)
No Special Privileges0.167***
(0.000)
Performance-Based Raises0.167***
(0.000)
Observations5
R21.000
Adjusted R21.000
Residual Std. Error0.000 (df=3)
F Statistic8948121883963971980941456310272.000*** (df=1; 3)
Note:*p<0.1; **p<0.05; ***p<0.01

Figures

Figure

Figure

Full-size Figures

You can use the {.background-image} container environment to completely fill the slide background with an image.

Ideally, your figure will be the same aspect ratio as the screen that you’re presenting on.

  • This can be a bit tricky because of the dynamic nature of reveal.js / HTML. But it’s probably something close to 16:9.
  • Aspect ratio can also matter for a regular full-frame images (previous slide).

Font Awesome

Font Awesome

This theme also includes the Font Awesome icon set Just use the fa class and the icon name:

Drop

Drop

If you want to toggle a Python terminal in your presentation, you can use the drop plugin

You can toggle the terminal with the backtick key ( `) or with the button below

In this template, the plugin also comes with matplotlib, numpy, and pandas pre-installed

You still need to import them in the terminal, though

Pyodide

Pyodide

If you want to run Python code in your presentation, you can use the pyodide engine. Click on the terminal button on the bottom left to open a Python terminal.

Appearance

Appearance

This presentation theme also includes the Appearance plugin. You can use it to animate elements on your slides.

  1. This is a list item
  2. This is a list item
  3. Split into words
  4. Split into letters

Multimodal

Multimodal

Multimodel can be used to showcase images, videos or code in your presentation.

Show figure

Link to a Markdown file

Link to an external website

Link to a Youtube video

Please refer to the quarto-presentation.qmd file for the code to generate these multimodal elements.

References

Fajgelbaum, Pablo D, Eduardo Morales, Juan Carlos Suarez Serrato, and Owen Zidar. 2018. “State Taxes and Spatial Misallocation,” 90.
Hsieh, Chang-Tai, and Enrico Moretti. 2019. “Housing Constraints and Spatial Misallocation.” American Economic Journal: Macroeconomics 11 (2): 39.
Moretti, Enrico. 2011. “Local Labor Markets.” In Handbook of Labor Economics. Vol. 4. Elsevier.
Suárez Serrato, Juan Carlos, and Owen Zidar. 2016. “Who Benefits from State Corporate Tax Cuts? A Local Labor Markets Approach with Heterogeneous Firms.” American Economic Review 106 (9).

Appendix

#| label: tbl-attsum
#| tbl-cap: Summary of the base R `attitude` dataset

modelsummary::datasummary_skim(attitude)

Back to main