Quarto

Dynamic documents and rendering websites

Matthew DeHaven

March 31, 2024

Course Home Page

Lecture Summary

Quarto
- Overview
- PDF Documents
- HTML Documents
- Presentations
- Websites

Quarto

Quarto Name

Where does the name come from?

Quarto

Allows you to write documents with both

code
markdown

And then render these documents into different formats:

PDF
HTML documents
presentations (both PDFs and HTML)
websites
dashboards
Microsoft Word and PPT

How Quarto Works

Quarto vs. Rmarkdown

If you are familar with R, you have likely heard of the Rmarkdown package.

Rmarkdown allows writing R code + markdown in the same file, and compiling documents.

Quarto is the successor to Rmarkdown.

Works with multiple languages
More standardized across output formats
Cleaner syntax
Fixes some weird/glitchy behavior

Quarto Pieces

Each Quarto Document has two sections:

a YAML
a body / content

Quarto YAML

YAML (yet another markup language) controls the settings.

Here is a basic YAML that sets the

title
output document format

---
title: My first Quarto Document
format: html
---

YAMLs are always declared at the top of the document, between two sets of —

Quarto Content

Quarto uses markdown for text content.

---
title: My first Quarto Document
format: html
---

Here is some text

## A Header

Some **bold** text

[A link](https://www.google.com)

Adding a Code Cell

If we want to include code in our document, we use a code cell:

```{r}
2 + 2
```

[1] 4

The triple backticks ``` are used to demark a code chunk.

The {r} tells Quarto this is an R code cell.

Quarto Document with Code Cell

---
title: My first Quarto Document
format: html
---

Here is some text

## A Header

Some **bold** text

[A link](https://www.google.com)

```{r}
2 + 2
```

Some more text.

Quarto Engines

For now, we will just use Quarto to combine markdown + R code

But you can instead use Quarto with

Python
Julia
Observable (a JavaScript plotting library)

You can only use one coding engine in a single document—no mixing languages.

Python and Julia Code Cells

Python:

```{python}
2 + 2
```

Julia:

```{julia}
2 + 2
```

Python and Julia Engines

Python and Julia both are executed using Jupyter.

Next lectures we will be talking about Python and Julia, and once we have those languages installed, we can use them with Quarto.

Code Cell Options

Code cells have a variety of settings,

echo
output
include
and more…

These are set with a special comment #| in the first lines of the code cell:

```{r}
#| echo: false
2 + 2
```

Code Cell Options

Code cells have a variety of settings, for instance,

echo controls if the code is printed in the document

With echo set to false:

```{r}
#| echo: false
2 + 2
```

[1] 4

With echo set to true (default):

```{r}
#| echo: true
2 + 2
```

2 + 2

[1] 4

Code Cell Options

Code cells have a variety of settings, for instance,

output controls if the result is printed in the document

With output set to false:

```{r}
#| output: false
2 + 2
```

2 + 2

With output set to true (default):

```{r}
#| output: true
2 + 2
```

2 + 2

[1] 4

Code Cell Options

Code cells have a variety of settings, for instance,

include controls if the code and result are printed in the document

With include set to false:

```{r}
#| include: false
2 + 2
```

With include set to true (default):

```{r}
#| include: true
2 + 2
```

2 + 2

[1] 4

Code Cell Settings in the YAML

Instead, you can set the code cell settings for all cells in the YAML.

---
title: My first Quarto Document
format: html
execute:
  echo: false
---

Here is some text

```{r}
2 + 2
```

Some more text.

```{r}
5 * 2
```

Here is some text

[1] 4

Some more text.

[1] 10

Code Cells Share an Environment

All of your code cells run in order, in the same R session.

This means you can use variables and packages from prior code cells.

---
title: My first Quarto Document
format: html
---

Here is some text

```{r}
x <- 2 + 2
```

Some more text.

```{r}
print(x)
```

Here is some text

x <- 2 + 2

Some more text.

print(x)

[1] 4

Outputting Figures

Code cells can output figures.

```{r}
#| echo: false
mtcars |>
  ggplot(aes(x = mpg, y = hp)) +
  geom_point()
```

Outputting Figures

Use fig-cap to set a caption (title).

```{r}
#| echo: false
#| fig-cap: "A Plot Title"
mtcars |>
  ggplot(aes(x = mpg, y = hp)) +
  geom_point()
```

Outputting Figures

Use fig-width and fig-height to control the figure size.

```{r}
#| echo: false
#| fig-width: 2
#| fig-height: 3
mtcars |>
  ggplot(aes(x = mpg, y = hp)) +
  geom_point()
```

Writing Math Equations

You can write inline math between two dollar signs: $ $

Rendering \sum_{i=0}^{\infty}x^i as math $\sum_{i=0}^{\infty}x^i$ that is inline.

Instead, you can use “display math” with $$ $$ to make an aligned block of math.

$$
\sum_{i=0}^{\infty}x^i
\\
\max_{a} \int_0^1 U(a)
$$

\[ \sum_{i=0}^{\infty}x^i \\ \max_{a} \int_0^1 U(a) \]

Output to PDF

---
title: My first Quarto Document
format: pdf
---

Here is some text

## A Header

Some **bold** text

[A link](https://www.google.com)

```{r}
2 + 2
```

Some more text.

Output to PDF

Quarto will

convert your markdown into LaTeX
run the code cells
compile the LaTeX + code output into a PDF

Output to Slides

There are a couple of options for making presentation slides:

format: beamer
- uses LaTeX’s beamer package for PDF slides
format: revealjs
- uses revealjs for making HTML slides
- this is what I use for my slides!

Slide Syntax

Individual slides are created with a level-2 header.

---
title: My Quarto Slides
format: revealjs
---

## Slide 1 Title

Some text on my slide

```{r}
2 + 2
```

## Slide 2 Title

Some more text.

- a bullet point
- a second bullet point

Slide 1 Title

Some text on my slide

2 + 2

[1] 4

Slide 2 Title

Some more text.

a bullet point
a second bullet point

Websites

Quarto Files to HTML

We have already seen that Quarto files can be rendered as HTML documents.

HTML documents are the basis of any website.

In order to create an actual website, we need to add one more file to our repository:

“_quarto.yml”

_quarto.yml

Is a YAML file of settings.

Declares this a Quarto Project.

We will be setting the project type to website, but there are others.

For a website,

controls the Navbar shared across all webpages
controls some website-wide settings

Example _quarto.yml for a website

_quarto.yml

project:
  type: website

website:
  title: "today"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - about.qmd

format:
  html:
    theme: cosmo
    css: styles.css
    toc: true

Live Coding

Live Coding Examples

A Basic Quarto Document
- rendered to PDF
- to HTML
A Quarto presentation
- to Beamer
- to revealjs
Take a look at the Quarto Academic Website template
Look at Quarto documentation