Cheatsheets:Quarto: Difference between revisions
Standardize: add copy button to block code snippets |
|||
| (5 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
{{Cheatsheet}} | {{Cheatsheet}} | ||
Quarto is like modern Latex+Jupyter: a scientific and technical publishing system that converts Markdown text, YAML front matter, and executable code chunks into publishing-grade HTML, PDF, Word and | |||
more. | |||
<blockquote> | <blockquote> | ||
'''Quarto uses Markdown for prose content. If you are unfamiliar with Markdown syntax, see [[Cheatsheets:Markdown]]. | |||
</blockquote> | |||
'''Quarto uses Markdown for prose content. If you are unfamiliar with Markdown syntax, see [[Cheatsheets: | |||
New to Quarto? You may find this | New to Quarto? You may find this | ||
[https://quarto.org/docs/get-started/hello/ Get Started tutorial] interesting. | [https://quarto.org/docs/get-started/hello/ Get Started tutorial] interesting. | ||
== Basic example: Pancake recipe == | == Basic example: Pancake recipe == | ||
| Line 24: | Line 24: | ||
|- | |- | ||
| | | | ||
<syntaxhighlight lang="markdown" line> | <syntaxhighlight lang="markdown" line copy> | ||
--- | --- | ||
title: "Pancake quantities" | title: "Pancake quantities" | ||
| Line 53: | Line 53: | ||
</ul> | </ul> | ||
<p style="font-size:1.5em;font-weight:bold;">Batter volume</p> | <p style="font-size:1.5em;font-weight:bold;">Batter volume</p> | ||
<syntaxhighlight lang="text"> | <syntaxhighlight lang="text" copy> | ||
Batter volume: 400 ml | Batter volume: 400 ml | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Line 63: | Line 63: | ||
== Front matter == | == Front matter == | ||
YAML between <syntaxhighlight lang="text" inline>---</syntaxhighlight> lines at the top of the file | * YAML | ||
* wrapped between two <syntaxhighlight lang="text" inline>---</syntaxhighlight> lines | |||
* always at the top of the file | |||
<syntaxhighlight lang="yaml"> | <syntaxhighlight lang="yaml" copy> | ||
--- | --- | ||
title: "Pancake quantities" | title: "Pancake quantities" | ||
| Line 91: | Line 93: | ||
|} | |} | ||
Several formats at once — a | Available <syntaxhighlight lang="yaml" inline>format</syntaxhighlight>: | ||
{| class="wikitable" | |||
! format !! output | |||
|- | |||
| <syntaxhighlight lang="yaml" inline>html</syntaxhighlight> || standalone HTML page | |||
|- | |||
| <syntaxhighlight lang="yaml" inline>pdf</syntaxhighlight> || PDF via LaTeX | |||
|- | |||
| <syntaxhighlight lang="yaml" inline>typst</syntaxhighlight> || PDF via the Typst engine bundled with Quarto | |||
|- | |||
| <syntaxhighlight lang="yaml" inline>docx</syntaxhighlight> || Word document | |||
|- | |||
| <syntaxhighlight lang="yaml" inline>revealjs</syntaxhighlight> || HTML slide deck | |||
|- | |||
| <syntaxhighlight lang="yaml" inline>gfm</syntaxhighlight> || GitHub Flavored Markdown | |||
|} | |||
HTML and PDF work out of the box. Others may require additional setup. | |||
<blockquote> | |||
'''Several formats at once — a map, not a list.''' A list fails at render time: | |||
{| class="wikitable" | |||
! Wrong !! Right | |||
|- | |||
| | |||
<syntaxhighlight lang="yaml" copy> | |||
format: [html, pdf] | |||
</syntaxhighlight> | |||
<syntaxhighlight lang="yaml"> | Render error: | ||
<syntaxhighlight lang="text" copy> | |||
ERROR: Validation of YAML front matter failed | |||
</syntaxhighlight> | |||
|| | |||
<syntaxhighlight lang="yaml" copy> | |||
format: | format: | ||
html: default | html: default | ||
pdf: default | pdf: default | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Renders pancake.html and pancake.pdf. | |||
|} | |||
</blockquote> | |||
<blockquote> | <blockquote> | ||
'''A colon in an unquoted value | '''A colon in an unquoted value causes a fatal exception:''' | ||
{| class="wikitable" | {| class="wikitable" | ||
| Line 106: | Line 146: | ||
|- | |- | ||
| | | | ||
<syntaxhighlight lang="yaml"> | <syntaxhighlight lang="yaml" copy> | ||
title: Pancakes: the recipe | title: Pancakes: the recipe | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Render error: | Render error: | ||
<syntaxhighlight lang="text"> | <syntaxhighlight lang="text" copy> | ||
ERROR: YAMLException: bad indentation of a mapping entry | ERROR: YAMLException: bad indentation of a mapping entry | ||
</syntaxhighlight> | </syntaxhighlight> | ||
|| | || | ||
<syntaxhighlight lang="yaml"> | <syntaxhighlight lang="yaml" copy> | ||
title: "Pancakes: the recipe" | title: "Pancakes: the recipe" | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Line 123: | Line 163: | ||
== Code chunks == | == Code chunks == | ||
A fenced | * A fenced Markdown codeblock | ||
* language name must be wrapped '''in <code>{</code> braces''' | |||
* executed by the compile engine | |||
* output inserted into rendered document | |||
<syntaxhighlight lang="markdown"> | <syntaxhighlight lang="markdown" copy> | ||
```{python} | ```{python} | ||
print("hi") | print("hi") | ||
| Line 131: | Line 174: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Available languages: python (via Jupyter), r (via knitr), julia, bash, and ojs. | |||
=== Chunk options === | === Chunk options === | ||
Lines starting with <syntaxhighlight lang="yaml" inline>#|</syntaxhighlight> at the top of the chunk | Lines starting with <syntaxhighlight lang="yaml" inline>#|</syntaxhighlight> at the top of the chunk modifies compile-time behaviour: | ||
{| class="wikitable" | {| class="wikitable" | ||
| Line 151: | Line 194: | ||
|} | |} | ||
'''echo''' — without it source and output both appear; with <syntaxhighlight lang="yaml" inline>echo: false</syntaxhighlight> only the output: | '''echo''' — without it source and output both appear; with <syntaxhighlight lang="yaml" inline>echo: false</syntaxhighlight> only the output. | ||
Without (default): | |||
{| class="wikitable" | {| class="wikitable" | ||
! | ! Source (in the .qmd) !! Rendered document | ||
|- | |- | ||
| | | | ||
<syntaxhighlight lang="python"> | <syntaxhighlight lang="python" copy> | ||
flour = 150 | |||
milk = 250 | |||
print(f"Batter volume: {flour + milk} ml") | |||
</syntaxhighlight> | |||
|| | |||
<blockquote> | |||
<syntaxhighlight lang="python" copy> | |||
flour = 150 | flour = 150 | ||
milk = 250 | milk = 250 | ||
print(f"Batter volume: {flour + milk} ml") | print(f"Batter volume: {flour + milk} ml") | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<syntaxhighlight lang="text" copy> | |||
<syntaxhighlight lang="text"> | |||
Batter volume: 400 ml | Batter volume: 400 ml | ||
</syntaxhighlight> | </syntaxhighlight> | ||
|| | </blockquote> | ||
<syntaxhighlight lang="python"> | |} | ||
With <syntaxhighlight lang="yaml" inline>echo: false</syntaxhighlight>: | |||
{| class="wikitable" | |||
! Source (in the .qmd) !! Rendered document | |||
|- | |||
| | |||
<syntaxhighlight lang="python" copy> | |||
#| echo: false | #| echo: false | ||
flour = 150 | flour = 150 | ||
| Line 174: | Line 232: | ||
print(f"Batter volume: {flour + milk} ml") | print(f"Batter volume: {flour + milk} ml") | ||
</syntaxhighlight> | </syntaxhighlight> | ||
|| | |||
<blockquote> | |||
<syntaxhighlight lang="text"> | <syntaxhighlight lang="text" copy> | ||
Batter volume: 400 ml | Batter volume: 400 ml | ||
</syntaxhighlight> | </syntaxhighlight> | ||
</blockquote> | |||
|} | |} | ||
'''eval: false''' — the source is shown but nothing runs, handy for scratch code you want to keep visible. | '''eval: false''' — the source is shown but nothing runs, handy for scratch code you want to keep visible: | ||
{| class="wikitable" | |||
! Source (in the .qmd) !! Rendered document | |||
|- | |||
| | |||
<syntaxhighlight lang="python" copy> | |||
#| eval: false | |||
print("Batter volume: 400 ml") | |||
</syntaxhighlight> | |||
|| | |||
<blockquote> | |||
<syntaxhighlight lang="python" copy> | |||
print("Batter volume: 400 ml") | |||
</syntaxhighlight> | |||
No output — the code never ran. | |||
</blockquote> | |||
|} | |||
'''include: false''' — source and output both stay out of the document, for setup code the reader does not need to see. | '''include: false''' — source and output both stay out of the document, for setup code the reader does not need to see: | ||
{| class="wikitable" | |||
! Source (in the .qmd) !! Rendered document | |||
|- | |||
| | |||
<syntaxhighlight lang="python" copy> | |||
#| include: false | |||
print("Batter volume: 400 ml") | |||
</syntaxhighlight> | |||
|| | |||
Nothing — neither the source nor the output appears. | |||
|} | |||
<blockquote> | <blockquote> | ||
| Line 192: | Line 280: | ||
|- | |- | ||
| | | | ||
<syntaxhighlight lang="markdown"> | <syntaxhighlight lang="markdown" copy> | ||
```python | ```python | ||
print("hi") | print("hi") | ||
| Line 200: | Line 288: | ||
Nothing executes; the source shows as a plain code block. | Nothing executes; the source shows as a plain code block. | ||
|| | || | ||
<syntaxhighlight lang="markdown"> | <syntaxhighlight lang="markdown" copy> | ||
```{python} | ```{python} | ||
print("hi") | print("hi") | ||
| Line 216: | Line 304: | ||
Set a chunk option for every chunk at once with <syntaxhighlight lang="yaml" inline>execute:</syntaxhighlight> in the front matter: | Set a chunk option for every chunk at once with <syntaxhighlight lang="yaml" inline>execute:</syntaxhighlight> in the front matter: | ||
<syntaxhighlight lang="yaml"> | <syntaxhighlight lang="yaml" copy> | ||
--- | --- | ||
title: "Pancake quantities" | title: "Pancake quantities" | ||
| Line 243: | Line 331: | ||
Give a section, table or figure an identifier, then refer to it with <syntaxhighlight lang="text" inline>@</syntaxhighlight>: | Give a section, table or figure an identifier, then refer to it with <syntaxhighlight lang="text" inline>@</syntaxhighlight>: | ||
<syntaxhighlight lang="markdown"> | <syntaxhighlight lang="markdown" copy> | ||
## Recipe data {#sec-data} | ## Recipe data {#sec-data} | ||
The amounts live in @sec-data; | The amounts live in @sec-data; the table is @tbl-pan and the figure is @fig-batter. | ||
| Ingredient | Amount | | | Ingredient | Amount | | ||
| Line 253: | Line 341: | ||
: Pancake ingredients {#tbl-pan} | : Pancake ingredients {#tbl-pan} | ||
```{python} | |||
#| label: fig-batter | |||
#| fig-cap: "Batter volume" | |||
import matplotlib.pyplot as plt | |||
plt.bar(["flour", "milk"], [150, 250]) | |||
plt.show() | |||
``` | |||
</syntaxhighlight> | </syntaxhighlight> | ||
The | The references render as "Section 1", "Table 1" and "Figure 1"; the table caption | ||
table caption becomes "Table 1: Pancake ingredients" | becomes "Table 1: Pancake ingredients" and the figure caption "Figure 1: Batter | ||
volume". Quarto numbers each target by the order it appears in the document. | |||
== | == Projects == | ||
A directory with a <syntaxhighlight lang="text" inline>_quarto.yml</syntaxhighlight> file is a '''project''': documents share its front matter and render as one site. A website project looks like this: | |||
<syntaxhighlight lang="text" copy> | |||
my-site/ | |||
├── _quarto.yml # project config: type, site settings, formats | |||
├── index.qmd # home page | |||
├── about.qmd # second page | |||
├── styles.css # custom styles for the html format | |||
└── _site/ # built site (generated by quarto render) | |||
</syntaxhighlight> | |||
Scaffold one: | |||
<syntaxhighlight lang="bash"> | <syntaxhighlight lang="bash" copy> | ||
quarto create-project --type website | quarto create-project --type website | ||
</syntaxhighlight> | </syntaxhighlight> | ||
creates <syntaxhighlight lang="text" inline>index.qmd</syntaxhighlight>, <syntaxhighlight lang="text" inline>about.qmd</syntaxhighlight>, <syntaxhighlight lang="text" inline>styles.css</syntaxhighlight> and <syntaxhighlight lang="text" inline>_quarto.yml</syntaxhighlight>. The scaffolded project file: | creates <syntaxhighlight lang="text" inline>index.qmd</syntaxhighlight>, <syntaxhighlight lang="text" inline>about.qmd</syntaxhighlight>, <syntaxhighlight lang="text" inline>styles.css</syntaxhighlight> and <syntaxhighlight lang="text" inline>_quarto.yml</syntaxhighlight>. The scaffolded project file, key parts annotated: | ||
<syntaxhighlight lang="yaml"> | <syntaxhighlight lang="yaml" copy> | ||
project: | project: | ||
type: website | type: website # website, book, default, manuscript | ||
website: | website: | ||
title: " | title: "My site" # shown in the browser tab and navbar | ||
navbar: | navbar: | ||
left: | left: # links on the left of the navigation bar | ||
- href: index.qmd | - href: index.qmd | ||
text: Home | text: Home | ||
| Line 304: | Line 391: | ||
html: | html: | ||
theme: | theme: | ||
- cosmo | - cosmo # Bootstrap theme | ||
- brand | - brand # brand color palette | ||
css: styles.css | css: styles.css # extra stylesheet | ||
toc: true | toc: true # table of contents on each page | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Render the whole project: | Render the whole project: | ||
<syntaxhighlight lang="bash"> | <syntaxhighlight lang="bash" copy> | ||
quarto render | quarto render | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Latest revision as of 09:45, 23 August 2026
Quick reference for smart people — part of our dev cheatsheets collection.
Quarto is like modern Latex+Jupyter: a scientific and technical publishing system that converts Markdown text, YAML front matter, and executable code chunks into publishing-grade HTML, PDF, Word and
more.
Quarto uses Markdown for prose content. If you are unfamiliar with Markdown syntax, see Cheatsheets:Markdown.
New to Quarto? You may find this Get Started tutorial interesting.
Basic example: Pancake recipe
A .qmd file =
- YAML front matter +
- Markdown prose +
- Code chunks (usually python)
| Source (.qmd) | Rendered with quarto render pancake.qmd into html
|
|---|---|
---
title: "Pancake quantities"
format: html
---
## Ingredients
- 150 g flour
- 250 ml milk
## Batter volume
```{python}
#| echo: false
flour = 150
milk = 250
print(f"Batter volume: {flour + milk} ml")
```
|
|
By default, the code chunks run at render time. echo: false (14) in the example hides the source code, so only the output appears in the rendered document here.
Front matter
- YAML
- wrapped between two
---lines - always at the top of the file
---
title: "Pancake quantities"
author: "Ada"
date: today
format: html
toc: true
---
| Key | Effect |
|---|---|
title: "Pancakes" |
document title |
author: Ada |
author; a list of authors: [Ada, Bo]
|
date: today |
date; the magic value today becomes the current date at render time
|
format: html |
output format |
toc: true |
table of contents |
lang: en |
document language |
Available format:
| format | output |
|---|---|
html |
standalone HTML page |
pdf |
PDF via LaTeX |
typst |
PDF via the Typst engine bundled with Quarto |
docx |
Word document |
revealjs |
HTML slide deck |
gfm |
GitHub Flavored Markdown |
HTML and PDF work out of the box. Others may require additional setup.
Several formats at once — a map, not a list. A list fails at render time:
Wrong Right format: [html, pdf]Render error:
ERROR: Validation of YAML front matter failed format: html: default pdf: defaultRenders pancake.html and pancake.pdf.
A colon in an unquoted value causes a fatal exception:
Wrong Right title: Pancakes: the recipeRender error:
ERROR: YAMLException: bad indentation of a mapping entry title: "Pancakes: the recipe"
Code chunks
- A fenced Markdown codeblock
- language name must be wrapped in
{braces - executed by the compile engine
- output inserted into rendered document
```{python}
print("hi")
```
Available languages: python (via Jupyter), r (via knitr), julia, bash, and ojs.
Chunk options
Lines starting with #| at the top of the chunk modifies compile-time behaviour:
| Option | Effect | Example |
|---|---|---|
echo |
show the source (default true) | #| echo: false
|
eval |
run the code (default true) | #| eval: false
|
include |
keep source and output in the document (default true) | #| include: false
|
label |
chunk label, referenced with @label |
#| label: fig-batter
|
fig-cap |
caption for figure output | #| fig-cap: "Batter volume"
|
echo — without it source and output both appear; with echo: false only the output.
Without (default):
| Source (in the .qmd) | Rendered document |
|---|---|
flour = 150
milk = 250
print(f"Batter volume: {flour + milk} ml")
|
|
With echo: false:
| Source (in the .qmd) | Rendered document |
|---|---|
#| echo: false
flour = 150
milk = 250
print(f"Batter volume: {flour + milk} ml")
|
|
eval: false — the source is shown but nothing runs, handy for scratch code you want to keep visible:
| Source (in the .qmd) | Rendered document |
|---|---|
#| eval: false
print("Batter volume: 400 ml")
|
|
include: false — source and output both stay out of the document, for setup code the reader does not need to see:
| Source (in the .qmd) | Rendered document |
|---|---|
#| include: false
print("Batter volume: 400 ml")
|
Nothing — neither the source nor the output appears. |
A fence without braces is a static code block — it never runs. A chunk that "does nothing" is usually this:
Wrong Right ```python print("hi") ```Nothing executes; the source shows as a plain code block.
```{python} print("hi") ```The engine runs it and inserts the output.
The inline form follows the same rule — see Inline code.
Options for the whole document
Set a chunk option for every chunk at once with execute: in the front matter:
---
title: "Pancake quantities"
format: html
execute:
echo: false
---
Every chunk hides its source; the outputs still appear. A #| option on one chunk overrides the document default.
Inline code
Inline code executes when the language is named in braces:
| Source | Renders as |
|---|---|
`{python} flour + milk` |
400 |
`flour + milk` |
flour + milk (literal, not evaluated) |
Cross-references
Give a section, table or figure an identifier, then refer to it with @:
## Recipe data {#sec-data}
The amounts live in @sec-data; the table is @tbl-pan and the figure is @fig-batter.
| Ingredient | Amount |
|---|---|
| Flour | 150 g |
: Pancake ingredients {#tbl-pan}
```{python}
#| label: fig-batter
#| fig-cap: "Batter volume"
import matplotlib.pyplot as plt
plt.bar(["flour", "milk"], [150, 250])
plt.show()
```
The references render as "Section 1", "Table 1" and "Figure 1"; the table caption becomes "Table 1: Pancake ingredients" and the figure caption "Figure 1: Batter volume". Quarto numbers each target by the order it appears in the document.
Projects
A directory with a _quarto.yml file is a project: documents share its front matter and render as one site. A website project looks like this:
my-site/
├── _quarto.yml # project config: type, site settings, formats
├── index.qmd # home page
├── about.qmd # second page
├── styles.css # custom styles for the html format
└── _site/ # built site (generated by quarto render)
Scaffold one:
quarto create-project --type website
creates index.qmd, about.qmd, styles.css and _quarto.yml. The scaffolded project file, key parts annotated:
project:
type: website # website, book, default, manuscript
website:
title: "My site" # shown in the browser tab and navbar
navbar:
left: # links on the left of the navigation bar
- href: index.qmd
text: Home
- about.qmd
format:
html:
theme:
- cosmo # Bootstrap theme
- brand # brand color palette
css: styles.css # extra stylesheet
toc: true # table of contents on each page
Render the whole project:
quarto render
builds the site into _site/.
CLI
| Command | What it does |
|---|---|
quarto render file.qmd |
render one file, or a whole project |
quarto render file.qmd --to pdf |
override the output format |
quarto preview |
live-render preview while editing |
quarto create-project --type website |
scaffold a project (default, book, website, manuscript) |
quarto publish gh-pages |
publish the built site to GitHub Pages; other providers: netlify, quarto-pub, … |
Further reading
- Quarto documentation — the official docs
- Get Started tutorial — the recommended tutorial
- Cheatsheets:markdown — Markdown syntax used by Quarto
- Pandoc — the document converter Quarto builds on