Your first Quarto document
An example lesson built with quarto-simulator
This is what a lesson looks like to a learner. Its source is vignettes/example-lesson.qmd. The other vignettes explain how each part is written.
A Quarto document is plain text with three parts: a YAML header that sets document options, markdown prose, and code cells that run when the document renders.
Each playground below has an editor on the left and the rendered document on the right. The preview is a simulation of Quarto that runs in your browser, made for practising the basics. Edit the text, then press ▶ Render (or Ctrl/Cmd + Shift + K, the same shortcut RStudio uses) to see the result. Everything runs in your browser.
Explore
Try changing the title, adding toc: true to the YAML header, or changing cars to pressure in the code cell.
Exercise 1: Document options and callouts
The YAML header controls how the whole document renders. Update this document so that:
- It has a table of contents.
- The sentence about practice is inside a tip callout.
A table of contents is a document option, so it goes in the YAML header between the --- lines.
A callout is a fenced div with a class: start it with ::: {.callout-tip} and end it with :::.
---
title: "Learning Quarto"
toc: true
---
## Why Quarto?
Quarto weaves together prose and code.
## Getting started
::: {.callout-tip}
Practice makes perfect: render early and often.
:::
## Next steps
Try a callout of your own.Exercise 2: Code cell options
Cell options start with #| and go at the top of a code cell. Change the cell so that:
- The code is hidden and only the plot shows.
- The plot is a cross-referenceable figure: give it a label starting with
fig-and a caption. - The sentence below the cell refers to the figure with
@.
#| echo: false hides a cell’s code. Figures need both #| label: fig-something and #| fig-cap: "...".
Refer to a figure by its label, for example @fig-pressure. Quarto replaces it with “Figure 1”.
---
title: "Air pressure"
---
```{r}
#| label: fig-pressure
#| fig-cap: "Vapor pressure of mercury by temperature."
#| echo: false
plot(pressure, type = "b")
```
@fig-pressure shows that vapor pressure rises steeply with temperature.Exercise 3: Fix the YAML
YAML is strict about indentation and punctuation. This document won’t render. Press ▶ Render, read the error message, and fix the header.
There are two problems. Check that every quote you open is closed. Options under html: need to be indented further than html: itself.
Exercise 4: Python cells
Python cells work too. Quarto runs them with Jupyter; here they run with Python in your browser. Change the document so that:
- The table is a cross-referenceable table: give the cell a label starting with
tbl-and atbl-cap. - The
???is replaced by inline Python code that computes the average score, rounded to one decimal place.
Table options look like figure options: #| label: tbl-scores and #| tbl-cap: "...".
Inline code is written `{python} expression`. Try round(scores["score"].mean(), 1).
pandas returns NumPy numbers, which display as np.float64(86.3). Format the number as text instead: `{python} f"{scores['score'].mean():.1f}"`.
---
title: "Quiz results"
---
```{python}
#| label: tbl-scores
#| tbl-cap: "Quiz scores."
import pandas as pd
scores = pd.DataFrame({"student": ["Ana", "Ben", "Cy"], "score": [88, 92, 79]})
scores
```
The average score was `{python} f"{scores['score'].mean():.1f}"`.