Quarto

A Grab Bag of

Tips, Tricks & Features

_brand.yml {.theme-slide1}

brand.yml is a simple, portable YAML file that codifies your company’s brand guidelines

Specify colors, fonts, themes in one file. Use them everywhere:

  • quarto
  • shiny
  • pkgdown
  • ggplot2
  • seaborn
  • etc etc

_brand.yml structure {.theme-slide1}

meta:
  name: brand.yml
  links:
    home: https://posit-dev.github.io/brand-yml
    github: https://github.com/posit-dev/brand-yml

logo:
  images:
    icon-color: logos/icon/brand-yml-icon-color.png
    wide-color: logos/wide/brand-yml-wide-color.png
    tall-color: logos/wide/brand-yml-tall-color.png
  small: icon-color
  medium: wide-color
  large: tall-color

color:
  palette:
    orange: "#FF6F20"
    pink: "#FF3D7F"
    green: "#28A745"
    yellow: "#FFC107"
  primary: orange
  success: green
  warning: yellow
  danger: pink

typography:
  fonts:
    - family: Open Sans
      source: google
    - family: IBM Plex Mono
      source: google
    - family: Rubik
      source: google
  base:
    family: Open Sans
    line-height: 1.6
  headings:
    family: Rubik
    weight: normal
  link:
    color: purple
  monospace:
    family: IBM Plex Mono
    size: 1em

defaults:
  bootstrap:
    # bootstrap variable definitions
  quarto:
    format:
      # basic format-specific settings
      html:
      revealjs:
  shiny:
    # shiny specific settings

_brand.yml usage {.theme-slide1}

Full page about using _brand.yml with Quarto: https://quarto.org/docs/authoring/brand.html

Simply add this _brand.yml file in your project, or specify it using the brand field

Quarto 1.9


Pre-release - coming soon!

_brand.yml use helper {.theme-slide8}

The quarto use brand command copies brand files from an external source into your project’s _brand/ directory


quarto use brand ./path/to/brand
quarto use brand myorg/shared-brand
quarto use brand https://example.com/brand.zip

Posit Connect Cloud Publishing

You can now use quarto publish posit-connect-cloud to effortlessly publish to Posit Connect Cloud

quarto publish can also be used for many different hosting sites such as Github Pages, Quarto Pub, Netlify, also Confluence

LLM friendly output

Many AI agents can parse websites by now. However your pages might not be optimized for LLM parsing

_quarto.yml
website:
  title: "My Documentation"
  llms-txt: true

Setting llms-text to true will generate llms.txt and .llms.md files for websites, making your content more accessible to large language models and AI-powered tools

1.9: PDF Accessibility & Standards

  • PDF Standards support for LaTeX and Typst via pdf-standard option
    • LaTeX supports UA-2 standard
    • Typst supports UA-1 standard
  • Alt text for images passes through to PDF for screen readers
  • quarto install verapdf for compliance validation

List Tables

New list-like syntax for creating complex tables:

::: {.list-table}
- - Fruit
  - Price

- - Apple
  - 1.20

- - Orange
  - 0.90
:::
Fruit Price
Apple 1.20
Orange 0.90 

::: {.list-table}
- - Function
  - Description

- - `sum()`
  - Add values:

    ```python
    sum([1, 2, 3])
    ```

- - `len()`
  - Count items:

    - Works on lists
    - Works on strings
:::
Function Description

sum()

Add values:

sum([1, 2, 3])

len()

Count items:

  • Works on lists
  • Works on strings

Typst Books

Bundled through the orange book typst format extension

_quarto.yml
project:
  type: book

book:
  title: "My Book"
  author: "Jane Doe"
  chapters:
    - index.qmd
    - intro.qmd
    - summary.qmd

format: typst

Typst theorems

Using the theorion

And you can the following yaml to change the appearance

format:
  typst:
    theorem-appearance: [fancy]{.highlight .mark-pink}

Typst theorems - types

Appearance Description
simple Classic LaTeX-style theorems (default)
fancy Colored boxes using brand colors
clouds Rounded backgrounds
rainbow Colored left border with colored title

Search Enhancements

  • Search result highlighting with persistent marks
  • Automatic tabset activation from search results
  • Multi-word cross-element highlighting

Quarto Wizard

A VS Code Extension by Mickaël CANOUIL

With a lot of killer features!

Quarto Wizard - Estension Management

Browse, install, update, and remove Quarto extensions

  • Central Registry
  • GitHub repos (supports owner/repo@version syntax)
  • URLs or local paths
  • Private GitHub repos with authentication

Quarto Wizard - Template Support

Use Quarto templates with target subdirectory support

Quarto Wizard - Completion support

Extension library

quarto-revealjs-codewindow

quarto-revealjs-codewindow

roughnotation

underline

circle

highlight

box

library(dplyr)
mtcars |>
  filter(mpg > 20) |>
  select(mpg, wt, hp) |>
  mutate(ratio = mpg / wt)
                mpg    wt  hp     ratio
Mazda RX4      21.0 2.620 110  8.015267
Mazda RX4 Wag  21.0 2.875 110  7.304348
Datsun 710     22.8 2.320  93  9.827586
Hornet 4 Drive 21.4 3.215 110  6.656299
Merc 240D      24.4 3.190  62  7.648903
Merc 230       22.8 3.150  95  7.238095
Fiat 128       32.4 2.200  66 14.727273
Honda Civic    30.4 1.615  52 18.823529
Toyota Corolla 33.9 1.835  65 18.474114
Toyota Corona  21.5 2.465  97  8.722110
Fiat X1-9      27.3 1.935  66 14.108527
Porsche 914-2  26.0 2.140  91 12.149533
Lotus Europa   30.4 1.513 113 20.092531
Volvo 142E     21.4 2.780 109  7.697842

more-fragments

bounceIn

fadeIn

slideInRight

zoomIn

Hello World


Slidecrafting

quarto helpers

quarto helpers

quarto helpers

quarto helpers

quarto helpers

quarto helpers

quarto helpers

quarto helpers

quarto-revealjs-editable

quarto-revealjs-editable

quarto-revealjs-editable

quarto-revealjs-editable

quarto-revealjs-editable