Cheatsheets:Quarto: Difference between revisions

From Wikibase
Jump to navigation Jump to search
mNo edit summary
Standardize: add copy button to block code snippets
 
(7 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 is a scientific and technical publishing system: Markdown content, YAML
'''Quarto uses Markdown for prose content. If you are unfamiliar with Markdown syntax, see [[Cheatsheets:Markdown]].
front matter and executable code chunks that render to HTML, PDF, Word and
</blockquote>
more. It builds on Pandoc.
 
'''Quarto uses Markdown for prose content. If you are unfamiliar with Markdown syntax, see [[Cheatsheets:markdown]].


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.
</blockquote>


== Basic example ==
== Basic example: Pancake recipe ==
 
A <syntaxhighlight lang="text" inline>.qmd</syntaxhighlight> file =


A <syntaxhighlight lang="text" inline>.qmd</syntaxhighlight> file: front matter between <syntaxhighlight lang="text" inline>---</syntaxhighlight> lines, then Markdown with a Python chunk:
# YAML front matter +
# Markdown prose +
# Code chunks (usually python)


<syntaxhighlight lang="markdown">
{| class="wikitable"
! Source (.qmd) !! Rendered with <syntaxhighlight lang="bash" inline>quarto render pancake.qmd</syntaxhighlight> into html
|-
|
<syntaxhighlight lang="markdown" line copy>
---
---
title: "Pancake quantities"
title: "Pancake quantities"
Line 30: Line 38:


```{python}
```{python}
# | echo: false
#| echo: false
flour = 150
flour = 150
milk = 250
milk = 250
Line 36: Line 44:
```
```
</syntaxhighlight>
</syntaxhighlight>
 
||
Render it:
 
<syntaxhighlight lang="bash">
quarto render pancake.qmd
</syntaxhighlight>
 
The chunk runs at render time; with <syntaxhighlight lang="yaml" inline>echo: false</syntaxhighlight> the source stays hidden and only the output appears in the document:
 
<blockquote>
<blockquote>
'''Ingredients'''
<p style="font-size:2em;font-weight:bold;">Pancake quantities</p>
* 150 g flour
<p style="font-size:1.5em;font-weight:bold;">Ingredients</p>
* 250 ml milk
<ul>
 
<li>150 g flour</li>
'''Batter volume'''
<li>250 ml milk</li>
<syntaxhighlight lang="text">
</ul>
<p style="font-size:1.5em;font-weight:bold;">Batter volume</p>
<syntaxhighlight lang="text" copy>
Batter volume: 400 ml
Batter volume: 400 ml
</syntaxhighlight>
</syntaxhighlight>
</blockquote>
</blockquote>
|}
By default, the code chunks run at render time. <syntaxhighlight lang="yaml" inline>echo: false</syntaxhighlight> (14) in the example hides the source code, so only the output appears in the rendered document here.


== 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 79: Line 86:
| <syntaxhighlight lang="yaml" inline>date: today</syntaxhighlight> || date; the magic value <syntaxhighlight lang="yaml" inline>today</syntaxhighlight> becomes the current date at render time
| <syntaxhighlight lang="yaml" inline>date: today</syntaxhighlight> || date; the magic value <syntaxhighlight lang="yaml" inline>today</syntaxhighlight> becomes the current date at render time
|-
|-
| <syntaxhighlight lang="yaml" inline>format: html</syntaxhighlight> || output format; several at once: <syntaxhighlight lang="yaml" inline>[html, pdf]</syntaxhighlight>
| <syntaxhighlight lang="yaml" inline>format: html</syntaxhighlight> || output format
|-
|-
| <syntaxhighlight lang="yaml" inline>toc: true</syntaxhighlight> || table of contents
| <syntaxhighlight lang="yaml" inline>toc: true</syntaxhighlight> || table of contents
Line 85: Line 92:
| <syntaxhighlight lang="yaml" inline>lang: en</syntaxhighlight> || document language
| <syntaxhighlight lang="yaml" inline>lang: en</syntaxhighlight> || document language
|}
|}
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>
Render error:
<syntaxhighlight lang="text" copy>
ERROR: Validation of YAML front matter failed
</syntaxhighlight>
||
<syntaxhighlight lang="yaml" copy>
format:
  html: default
  pdf: default
</syntaxhighlight>
Renders pancake.html and pancake.pdf.
|}
</blockquote>
<blockquote>
'''A colon in an unquoted value causes a fatal exception:'''
{| class="wikitable"
! Wrong !! Right
|-
|
<syntaxhighlight lang="yaml" copy>
title: Pancakes: the recipe
</syntaxhighlight>
Render error:
<syntaxhighlight lang="text" copy>
ERROR: YAMLException: bad indentation of a mapping entry
</syntaxhighlight>
||
<syntaxhighlight lang="yaml" copy>
title: "Pancakes: the recipe"
</syntaxhighlight>
|}
</blockquote>


== Code chunks ==
== Code chunks ==


A fenced block whose info string names a language '''in braces''' runs as code; the engine executes it and inserts the output:
* 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 96: Line 174:
</syntaxhighlight>
</syntaxhighlight>


Engines include python (via Jupyter), r (via knitr), julia, bash and ojs.
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 configure it:
Lines starting with <syntaxhighlight lang="yaml" inline>#|</syntaxhighlight> at the top of the chunk modifies compile-time behaviour:


{| class="wikitable"
{| class="wikitable"
Line 114: 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"
! Without (default) !! With echo: false
! 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>
Output:
<syntaxhighlight lang="text">
Batter volume: 400 ml
Batter volume: 400 ml
</syntaxhighlight>
</syntaxhighlight>
||
</blockquote>
<syntaxhighlight lang="python">
|}
# | echo: false
 
With <syntaxhighlight lang="yaml" inline>echo: false</syntaxhighlight>:
 
{| class="wikitable"
! Source (in the .qmd) !! Rendered document
|-
|
<syntaxhighlight lang="python" copy>
#| echo: false
flour = 150
flour = 150
milk = 250
milk = 250
print(f"Batter volume: {flour + milk} ml")
print(f"Batter volume: {flour + milk} ml")
</syntaxhighlight>
</syntaxhighlight>
||
<blockquote>
<syntaxhighlight lang="text" copy>
Batter volume: 400 ml
</syntaxhighlight>
</blockquote>
|}


Output:
'''eval: false''' — the source is shown but nothing runs, handy for scratch code you want to keep visible:
<syntaxhighlight lang="text">
 
Batter volume: 400 ml
{| 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:
 
{| 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>
'''A fence without braces is a static code block — it never runs.''' A chunk that "does nothing" is usually this:
 
{| class="wikitable"
! Wrong !! Right
|-
|
<syntaxhighlight lang="markdown" copy>
```python
print("hi")
```
</syntaxhighlight>
 
Nothing executes; the source shows as a plain code block.
||
<syntaxhighlight lang="markdown" copy>
```{python}
print("hi")
```
</syntaxhighlight>
</syntaxhighlight>
The engine runs it and inserts the output.
|}
|}


'''eval: false''' — the source is shown but nothing runs, handy for scratch code you want to keep visible.
The inline form follows the same rule — see [[#Inline code|Inline code]].
</blockquote>
 
=== Options for the whole document ===
 
Set a chunk option for every chunk at once with <syntaxhighlight lang="yaml" inline>execute:</syntaxhighlight> in the front matter:
 
<syntaxhighlight lang="yaml" copy>
---
title: "Pancake quantities"
format: html
execute:
  echo: false
---
</syntaxhighlight>
 
Every chunk hides its source; the outputs still appear. A <syntaxhighlight lang="yaml" inline>#|</syntaxhighlight> option on one chunk overrides the document default.


== Inline code ==
== Inline code ==
Line 162: 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; see Table @tbl-pan.
The amounts live in @sec-data; the table is @tbl-pan and the figure is @fig-batter.


| Ingredient | Amount |
| Ingredient | Amount |
Line 172: 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>
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 <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>
</syntaxhighlight>


The reference <syntaxhighlight lang="text" inline>@sec-data</syntaxhighlight> renders as "Section 1", the
Scaffold one:
table caption becomes "Table 1: Pancake ingredients", and figures are
 
referenced the same way with <syntaxhighlight lang="text" inline>@fig-label</syntaxhighlight>.
<syntaxhighlight lang="bash" copy>
quarto create-project --type website
</syntaxhighlight>


== Formats ==
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:


The <syntaxhighlight lang="yaml" inline>format</syntaxhighlight> key picks the output. HTML and PDF work out of the box:
<syntaxhighlight lang="yaml" copy>
project:
  type: website              # website, book, default, manuscript


{| class="wikitable"
website:
! format !! output
  title: "My site"           # shown in the browser tab and navbar
|-
  navbar:
| <syntaxhighlight lang="yaml" inline>html</syntaxhighlight> || standalone HTML page
    left:                    # links on the left of the navigation bar
|-
      - href: index.qmd
| <syntaxhighlight lang="yaml" inline>pdf</syntaxhighlight> || PDF, via LaTeX or the Typst engine
        text: Home
|-
      - about.qmd
| <syntaxhighlight lang="yaml" inline>typst</syntaxhighlight> || PDF via the Typst engine bundled with Quarto
 
|-
format:
| <syntaxhighlight lang="yaml" inline>docx</syntaxhighlight> || Word document
  html:
|-
    theme:
| <syntaxhighlight lang="yaml" inline>revealjs</syntaxhighlight> || HTML slide deck
      - cosmo                # Bootstrap theme
|-
      - brand                # brand color palette
| <syntaxhighlight lang="yaml" inline>gfm</syntaxhighlight> || GitHub Flavored Markdown
    css: styles.css          # extra stylesheet
|}
    toc: true                # table of contents on each page
</syntaxhighlight>
 
Render the whole project:
 
<syntaxhighlight lang="bash" copy>
quarto render
</syntaxhighlight>
 
builds the site into <syntaxhighlight lang="text" inline>_site/</syntaxhighlight>.


== CLI ==
== CLI ==
Line 211: Line 418:
| <syntaxhighlight lang="bash" inline>quarto create-project --type website</syntaxhighlight> || scaffold a project (default, book, website, manuscript)
| <syntaxhighlight lang="bash" inline>quarto create-project --type website</syntaxhighlight> || scaffold a project (default, book, website, manuscript)
|-
|-
| <syntaxhighlight lang="bash" inline>quarto publish gh-pages</syntaxhighlight> || publish to GitHub Pages, Netlify or Quarto Pub
| <syntaxhighlight lang="bash" inline>quarto publish gh-pages</syntaxhighlight> || publish the built site to GitHub Pages; other providers: netlify, quarto-pub, …
|}
|}
<blockquote>
'''Gotcha:''' a fence without braces is a static code block — it never runs. A
chunk that "does nothing" is usually this:
<syntaxhighlight lang="markdown">
```python
print("hi")
```
</syntaxhighlight>
Fix: put the language in braces, then it executes:
<syntaxhighlight lang="markdown">
```{python}
print("hi")
```
</syntaxhighlight>
The inline form follows the same rule: <syntaxhighlight lang="markdown" inline>`{python} flour + milk`</syntaxhighlight> renders as 400, while <syntaxhighlight lang="markdown" inline>`flour + milk`</syntaxhighlight> renders the literal text flour + milk.
</blockquote>
<blockquote>
'''Gotcha:''' YAML values containing a colon must be quoted. Unquoted:
<syntaxhighlight lang="yaml">
title: Pancakes: the recipe
</syntaxhighlight>
fails at render time with
<syntaxhighlight lang="text">
ERROR: YAMLException: bad indentation of a mapping entry
</syntaxhighlight>
Fix: quote the value:
<syntaxhighlight lang="yaml">
title: "Pancakes: the recipe"
</syntaxhighlight>
</blockquote>


== Further reading ==
== Further reading ==

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 =

  1. YAML front matter +
  2. Markdown prose +
  3. 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")
```

Pancake quantities

Ingredients

  • 150 g flour
  • 250 ml milk

Batter volume

Batter volume: 400 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: default

Renders pancake.html and pancake.pdf.

A colon in an unquoted value causes a fatal exception:

Wrong Right
title: Pancakes: the recipe

Render 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")
flour = 150
milk = 250
print(f"Batter volume: {flour + milk} ml")
Batter volume: 400 ml

With echo: false:

Source (in the .qmd) Rendered document
#| echo: false
flour = 150
milk = 250
print(f"Batter volume: {flour + milk} ml")
Batter volume: 400 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")
print("Batter volume: 400 ml")

No output — the code never ran.

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