Introduction to Quarto

Raukr 2023

Christophe Dervieux

Posit PBC

June 13, 2023

What is Quarto?

Quarto is the next generation of R Markdown:
It unifies and extends it

Quarto …

…is a new, open-source, scientific, and technical publishing system

  • Computations: Python, R, Julia, Observable JS
  • Markdown: Pandoc w/ many enhancements
  • Output: Documents, presentations, websites, books, blogs
A schematic representing the multi-language input (e.g. Python, R, Observable, Julia) and multi-format output (e.g. PDF, html, Word documents, and more) versatility of Quarto.

Artwork from “Hello, Quarto” keynote by Julia Lowndes and Mine Çetinkaya-Rundel, presented at RStudio Conference 2022. Illustrated by Allison Horst.

With Quarto…

… you can weave together narrative text and code to produce elegantly formatted output as documents, web pages, blog posts, books and more.


just like R Markdown…


but not just like it, there’s more to it…

Quarto …

unifies + extends the R Markdown ecosystem

Quarto …

unifies + extends the R Markdown ecosystem


unifies for people who love R Markdown

Quarto …

unifies + extends the R Markdown ecosystem


unifies for people who love R Markdown

extends for people who don’t know R Markdown

So, Why a New System?

  • The number of languages and runtimes used for scientific discourse is very broad (and the Jupyter ecosystem in particular is extraordinarily popular).
  • Quarto is at its core multi-language and multi-engine (supporting Knitr, Jupyter, and Observable today and potentially other engines tomorrow).
  • On the other hand, R Markdown is heavily tied to R which limits the number of people it can benefit.
  • Quarto is Posit’s attempt to bring 10-years experience of R Markdown to everyone!

How to use Quarto ?

As this is not an R package like R Markdown…

Revisit: What is Quarto?

Quarto is a command line interface (CLI) that renders plain text formats (.qmd, .rmd, .md) OR mixed formats (.ipynb/Jupyter notebook) into static PDF/Word/HTML reports, books, websites, presentations and more.

$ quarto --help

  Usage:   quarto 
  Version: 1.4.128

  Description:

    Quarto CLI

  Options:

    -h, --help     - Show this help.
    -V, --version  - Show the version number for this program.  

  Commands:

    render          [input] [args...]     - Render files or projects to various document types.
    preview         [file] [args...]      - Render and preview a document or website project.
    serve           [input]               - Serve a Shiny interactive document.
    create          [type] [commands...]  - Create a Quarto project or extension
    create-project  [dir]                 - Create a project for rendering multiple documents
    convert         <input>               - Convert documents to alternate representations.
    pandoc          [args...]             - Run the version of Pandoc embedded within Quarto.
    run             [script] [args...]    - Run a TypeScript, R, Python, or Lua script.
    add             <extension>           - Add an extension to this folder or project
    install         [target...]           - Installs an extension or global dependency.
    publish         [provider] [path]     - Publish a document or project. Available providers include:
    check           [target]              - Verify correct functioning of Quarto installation.
    help            [command]             - Show this help or the help of a sub-command.

Quarto Computation Engines

  • Knitr
  • Jupyter
  • Observable JS
  • Others possible…

Knitr Engine

For R, Quarto still uses Knitr under the hood. Consequently, the vast majority of existing Rmd files can be rendered unmodified.

Note that the standard syntax for chunk options has changed (old syntax still works):

```{{r}}
#| echo: false
#| fig-cap: "Cars"
plot(cars)
```

Knitr Engine

Jupyter Engine — ipynb

The Jupyter engine supports the use of Python, Julia, and any other language that has a Jupyter kernel.

Jupyter supports two input file formats:

  • Traditional notebooks (.ipynb)
  • Markdown w/ chunks (.qmd)

Hello Jupyter: https://quarto.org/#hello-quarto

Jupyter Engine: ipynb

You can also render Jupyter notebooks (.ipynb files) directly. Note that in this case no execution occurs by default:

Observable JS

Quarto includes native support for Observable JS, a set of enhancements to vanilla JavaScript created by Mike Bostock (also the author of D3).

Observable JS is distinguished by its reactive runtime, which is especially well suited for interactive data exploration and analysis.

Demo: https://quarto.org/docs/interactive/ojs/#example

Shared Core Syntax

Core features have similar expression across formats:

  • Code folding

  • Tabsets

  • Theming

Unifies R Markdown

The R Markdown ecosystem was built over nearly a decade (resulting in lots of inconsistency & duplication)

Packages
  • tufte
  • rticles
  • revealjs
  • xaringan
  • bookdown
  • blogdown
  • distill
Features
  • Floating TOC
  • Code folding / copying
  • Syntax highlighting
  • Page layout
  • Theming
  • Tabsets
  • Section anchors

Some features requires specific R packages and specific syntax.

Code folding / copying

Code
```{r}
#| code-fold: true

library(ggplot2)
dat <- data.frame(cond = rep(c("A", "B"), each=10),
                  xvar = 1:20 + rnorm(20,sd=3),
                  yvar = 1:20 + rnorm(20,sd=3))

ggplot(dat, aes(x=xvar, y=yvar)) +
    geom_point(shape=1) + 
    geom_smooth() 
```

Tabsets

fizz_buzz <- function(fbnums = 1:50) {
  output <- dplyr::case_when(
    fbnums %% 15 == 0 ~ "FizzBuzz",
    fbnums %% 3 == 0 ~ "Fizz",
    fbnums %% 5 == 0 ~ "Buzz",
    TRUE ~ as.character(fbnums)
  )
  print(output)
}
def fizz_buzz(num):
  if num % 15 == 0:
    print("FizzBuzz")
  elif num % 5 == 0:
    print("Buzz")
  elif num % 3 == 0:
    print("Fizz")
  else:
    print(num)

Tabset syntax: https://quarto.org/docs/output-formats/html-basics.html#tabsets

Theming

Universal themeing system (based on SCSS) for all HTML output formats (shared by HTML and RevealJS slides, extendable to work with anything).

Based on core variables defined by bslib (so fully compatible with Shiny, Flexdashboard, & R Markdown themes).

Sample theme file:

/*-- scss:defaults --*/
$h2-font-size:          1.6rem !default;
$headings-font-weight:  500 !default;

$custom-color: blue;

/*-- scss:rules --*/
h1, h2, h3, h4, h5, h6 {
  text-shadow: -1px -1px 0 rgba(0, 0, 0, .3);
  color: $custom-color;
}

New Features

  • Cross references
  • Advanced page layout
  • Figure/layout panels
  • Callouts
  • Diagrams
  • Extensions
  • YAML intelligence
  • Publishing

Cross References

Cross reference figures, tables, equations, sections, theorems, etc.

Advanced page layout

Advanced page layout features inspired by Tutfe, Distill, and Hugo Prose.

  • Figures and tables that span the entire page
  • Use of margin for figures, equations, captions, asides, footnotes, and citations
  • Responsive show/hide of site navigation and TOC
  • Examples: HTML, PDF

Figure/Layout Panels

  • Arbitrary layout of figures and tables (similar to cowplot and patchwork)
  • Also works for code chunks that produce figures and tables. Example
  • Shorthand syntax (layout-ncol or layout-nrow) available for simple cases.
  • Can target arbitrary content including equations, bullet lists, etc.
::: {layout="[[40,-20,40], [100]]"}
![Surus](surus.png)
![Hanno](hanno.png)
![Lin Wang](lin-wang.png)
:::

Callouts

Work in various formats: HTML, PDF, MS Word, and ePub output

::: {.callout-note}
Note that there are five types of callouts, including: 
`note`, `tip`, `warning`, `caution`, and `important`.
:::

Diagrams

Quarto has native support for embedding Mermaid and Graphviz diagrams.

```{mermaid}
%%| output-location: column
flowchart TD
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}
  C --> D[Result one]
  C --> E[Result two]
```

Quarto Extensions

List of existing extension at https://quarto.org/docs/extensions/

  • Shortcodes are special markdown directives that generate various types of content. For example, to embed videos in a document:

    {{< video https://www.youtube.com/embed/wo9vZccmqwc >}}
  • Filters are a flexible and powerful tool for introducing new global behaviors and/or new markdown rendering behaviors. For example,

    filters: [webr]
  • Formats enable you to create new output formats by bundling together document options, templates, stylesheets, and other content. For example, an article for Association of Computing Machinery (ACM) journal

    format: acm-pdf

YAML Intelligence

  • YAML code completion for config files, front matter, and chunk options
  • Real-time diagnostics and clear errors at render time for invalid YAML

Completion

Diagnostics

Publishing

https://quarto.org/docs/publishing/

Integrated quarto publish command that targets a variety of services:

Quarto Pub Free publishing service ideal for blogs, course or project websites, books, presentations, and personal hobby sites.
GitHub Pages Publish content based on source code managed within a GitHub repository.
Posit Connect Publishing platform for secure sharing of data products within an organization.
Netlify Professional web publishing platform with many advanced features including custom domains and authentication.
Confluence A publishing platform for supporting team collaboration, with free and paid hosting options.
Other Services Content rendered with Quarto uses standard formats (HTML, PDFs, MS Word, etc.) that can be published anywhere.

Advanced Formats

  • Websites

  • Books

  • Blogs

  • Presentations

  • Journal Articles

Quarto Websites

  • Arbitrary content depth / organization

  • Multi-level navigation (navbar / sidebar / hybrid)

  • Full text search (client side or Algolia)

  • Freezing computational output

  • Example: https://quarto.org and more at Gallery

_quarto.yml (simple website)
project:
  type: website

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

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

Quarto Books

  • Inherit features of Quarto websites (navigation, search, etc.)

  • Support cross references across chapters

  • Formats include HTML, PDF, MS Word, and ePub

  • Examples: Gallery

_quarto.yml (simple book)
project:
  type: book

book:
  title: "mybook"
  author: "Jane Doe"
  date: "8/18/2021"
  chapters:
    - index.qmd
    - intro.qmd
    - references.qmd

bibliography: references.bib

format:
  html: default
  pdf: default
  epub:
    cover-image: cover.png

Quarto Blogs

  • Inherit features of Quarto websites (navigation, search, etc.)

  • Automatically generated listing and RSS feed

  • Customizable about page

  • Examples: https://quarto.org/docs/blog/ and more at Gallery

index.qmd (website with posts/)
---
title: "myblog"
listing:
  contents: posts
  sort: "date desc"
  type: default
  categories: true
---


posts/first-post/index.qmd
---
title: "Post With Code"
description: "Post description"
author: "Fizz McPhee"
date: "5/22/2021"
categories:
  - news
  - code
---

Quarto Presentations

https://quarto.org/docs/presentations/revealjs/demo/

  • Based on a (heavily) customized version of RevealJS:
    • Image, video, and iframe backgrounds
    • PDF Printing
    • Speaker view
    • Plugin system
  • Many features inspired by xaringanExtra:
    • Chalkboard / drawing on slides
    • Multicast (synced presenter / viewer slides)
    • Slide tone (for accessibility)
    • Absolute positioning of slide elements

Quarto Journals

https://quarto.org/docs/journals/

Custom format system designed to accomodate the creation of articles for publishing in professional Journals:

  • The ability to flexibly adapt the native LaTeX templates provided by Journals for use with Pandoc.

  • The use of spans and divs to apply formatting (which enables targeting by CSS for HTML output and LaTeX macros/environments for PDF output).

  • A standardized schema for authors and affiliations so that you can express this data once and then have it automatically formatted according to the styles required for various Journals.

  • The use of Citation Style Language (CSL) to automate the formatting of citations and bibliographies according to whatever style is required by various Journals.

Example: https://quarto-journals.github.io/jss/

Quarto Tools

  • Quarto CLI

  • RStudio IDE

  • VS Code Extension

  • Jupyter Lab

  • Text Editors

  • Visual Editor

Quarto CLI

Core component that drives Quarto rendering. This is the only thing you need to render plain markdown (it includes Pandoc 2.18).

  • Add knitr to render documents w/ R
  • Add jupyter to render with Jupyter kernels

Like git, this is a system level component that is used by RStudio, VS Code, Jupyter Lab, terminal sessions, etc.

Download/install: https://quarto.org/docs/get-started/

RStudio IDE

Current release of RStudio IDE has Quarto tooling on-par w/ R Markdown tooling

VS Code Extension

https://quarto.org/docs/tools/vscode.html

  • Render command with integrated preview pane
  • Syntax highlighting for markdown and embedded languages
  • Completion for embedded languages (e.g. Python, R, Julia, LaTeX, etc.)
  • Completion and diagnostics for project files and document/cell options
  • Completion for citations and cross references
  • Commands and key-bindings for running cells and selected line(s)
  • Automatic navigation to render errors for Jupyter, Knitr, and YAML
  • Live preview for embedded mermaid and graphviz diagrams
  • Assist panel for contextual help, image preview, and math preview
  • Code snippets for common markdown constructs
  • Code folding and document outline for navigation within documents
  • Workspace symbol provider for navigation across project files

Jupyter Lab

Text Editors

Visual Editor

https://quarto.org/docs/visual-editor/

  • The Quarto visual editor provides a WYSIWYM editing interface for all of Pandoc markdown

  • Tables, citations, cross-references, footnotes, divs/spans, definition lists, attributes, raw HTML/TeX, etc.

  • Includes support for executing code cells and viewing their output inline.

Learning More

Slides: https://cderv.github.io/raukr-2023-quarto

Questions?