Illustration of two penguins, one blue and one orange, taking a selfie with a selfie stick. The moon in the background looks like the Quarto logo.

Hello Quarto
Don’t miss Julia Stewart Lowndes and I talk about Quarto at rstudio::conf(2022) at 9am ET. Join us in Potomac A or on the live stream at rstd.io/conf.
Jul 28, 2022

Cover slide with the words Quarto for the curious and photo of an old quarto style printed book.

Quarto for the curious
If you’re curious about Quarto, take a look at Tom Mock’s slide deck from rstudio::conf(2022) where he introduces Quarto, particularly for R Markdown users.
Jul 27, 2022

YAML for setting highlight-style to a11y as well as for light and dark theme (also provided in the blog post) and the resulting webpage in light and dark mode showing how the a11y theme adapts.

Accessibility: a11y theme
Quarto comes with accessible (with respect to color contrast) theme for syntax highlighting: a11y. This theme is adaptive, so it automatically switches between a dark and light mode based upon the theme of the website. It is designed to work well with sites with dark / light mode.
Jul 26, 2022

YAML for adding the alt text for a figure created with code. The resulting figure as well as the HTML which shows the alt text for the image.

Accessibility: fig-alt
You can add alternative text to figures you create with code by adding the fig-alt chunk option, which works for Knitr, Jupyter, and Observable code chunks.
Jul 25, 2022

Slide with an incremental list with three items. Arrows between each item and a loudspeaker icon at each arrow indicates audio would be played as you progress through items. Also shown is the YAML required for this feature, which is available in the blog post.

Accessibility: slide-tone
You can set your Quarto presentation to play a subtle sound when slide is advanced to the next slide or as part of incremental build in a given slide. This enables presenters to hear an auditory signal (from a low C to a high C note) of their progress through the slides.
Jul 24, 2022

YAML for adding the alt text for the blog featured image. The resulting HTML which shows the alt text for the image. And the output, blog post listing with the featured image.

Accessibility: image-alt
For Quarto websites, blog posts, and HTML pages, you can include an image in the metadata that will be displayed in places such as the thumbnail for blog posts (like each of the tips on this site), and the preview card on social media.
Jul 23, 2022

YAML definition for adding the twitter icon and aria-label to the Quarto documentation site. The resulting html which shows an icon, a link, and an aria-label. And the output, the Twitter icon on the navbar.

Accessibility: aria-label
For Quarto websites, you can add icons as Nav Items in the navbar and/or page footer YAML. The value of the icon field can be the name of any of the Bootstrap icons. To make these items accessible to screen readers, you should also add an aria-label describing what the navigation item is.
Jul 22, 2022

Using RStudio's Visual Editor to insert a citation from DOI. The citation is for the Welcome to the Tidyverse paper. Citation is inserted using DOI and the Insert Citation menu. Steps for inserting a citation this way can be found in the blog post.

Citations
This is a bit of a Quarto tip and a bit of an RStudio Visual Editor tip that will also work with R Markdown documents.
Jul 21, 2022

A slide with no title but slide ID and data-menu-title defined. Arrows point to where these pieces of information go on the slide URL and presentation outline. The screenshots are from Slide 3 of the example in the blog post, where the complete code can be found.

Title-less slides
Most slides are comprised of a title and content, but sometimes you might choose to not have a title for a slide.
Jul 20, 2022

Code and output for a radioInput() widget that asks the question Are you a cat or dog person? with choices Cat person, Dog person, Don't make me choose, and Neither. An arrow points to code for defining output$radio_output that places the widget value in a renderPrint() function. Finally, code and output for rendering the widget value with verbatimTextOutput(). Complete code can be found in the blog post.

Shiny
You can create interactive Quarto documents using Shiny. To do so:
Jul 19, 2022

Diagram depicting how Quarto orchestrates rendering of documents: start with a qmd file, use the Knitr or Jupyter engine to perform the computations and convert it to an md file, then use Pandoc to convert to various file formats including HTML, PDF, and Word.

Diagrams
Quarto supports creating diagrams (flow charts, sequence diagrams, etc.) in with Mermaid and Graphviz.
Jul 18, 2022

Three code chunks with YAML chunk options being edited. The first one showcases YAML completion for fields -- typing e brings up options that start with e. The second one showcases YAML completion for options -- eval can be set to true or false. The third one showcases diagnostics that are provided in the case of errors -- setting eval to FALSE (with capital letters) prompts a message that says it should be true or false.

YAML intelligence
Quarto offers extensive YAML intelligence (completion and diagnostics) in the RStudio IDE and in VS Code for project files, YAML front matter, and executable cell options. This makes it easier to write YAML, whether you’re an expert or just starting to learn.
Jul 17, 2022

Scrolling through the Quarto Gallery at quarto.org/docs/gallery.

Quarto Gallery
Need some Quarto inspiration? Want to see examples of what others are creating with Quarto? And importantly, how they’re creating them? Take a look at the newly refreshed Quarto Gallery.
Jul 16, 2022

Code for installing the Font Awesome extension for Quarto: quarto install extension quarto-ext/fontawesome and a table that shows the input syntax and output icon for the icons brands apple, calendar, user-doctor, and door-closed.

Font Awesome
Including Font Awesome icons in Quarto documents is now easy peasy lemon squeezy with the Font Awesome extension. Just surround the Font Awesome icon name in {{< and >}}.
Jul 15, 2022

Switching between light and dark mode using the toggle on the navbar of this blog&#039;s homepage.

Dark mode
Quarto websites support light and dark themes and will automatically add a light/dark toggle to your website if you supply both themes.
Jul 14, 2022

Three ways of linking to source code from within your document, each presented with its associated YAML. (1) Make source code available on page. (2) Link to source code on repo. (3) Link to any file as source code. The associated YAML fields are provided in the blog post.

Code tools
You can include a Code menu in the header of your document that provides various tools for readers to interact with your source code.
Jul 13, 2022

Screenshot of Discussions page for the quarto-dev/quarto-cli repo with the word Questions next to it and the screenshot issues page for the same repo with the word bug reports next to it.

Need help?
Need help with a Quarto thing? If you have a question or a feature request, post on Quarto Discussions. If you have a bug report, post an issue on the quarto-dev/quarto-cli repo.
Jul 12, 2022

Find the bunny among the cats slide from the post, being zoomed in and out three times.

Slide zoom
One way to draw your audience’s attention to a particular spot on your slides is annotating it, which I wrote about in quartotip #7. Another way of doing this is zooming in, which you can do by holding down the Alt key (or Ctrl in Linux) and clicking on any element to zoom towards it. Click again to zoom back out.
Jul 11, 2022

On top, the homebrew logo, an orange heart, and the Quarto logo. Underneath the code for two options for installation via Homebrew. Option 1 is brew install –cask quarto. Option 2 is brew tap rundel/quarto-cli followed by brew install quarto. And at the bottom the code for updating Quarto with Homebrew: brew upgrade quarto. The complete code can be found in the blog post.

Quarto on Homebrew
If you’re a Homebrew person, chances are you’d like to install and update Quarto with Homebrew. There are two options for doing so.
Jul 10, 2022

On top, a screenshot of the Insert Anything tool in the RStudio Visual Editor to insert an HTML block. An arrow from this points to the bottom image, which is an HTML block containing raw HTML code for including the Quarto Documentation at quarto.org in an iframe. The complete code can be found in the blog post.

HTML blocks
Want to embed an iframe on a webpage or a slide deck? Plop the sharing code in a raw html block!
Jul 9, 2022

Two pieces of source code an the output of eadch. The first one shows the sentence To draw attention to a specific part of the text, you might want to make it red with a yellow background; like this. spans used to change color of the text. The second one shows code for a slide with three separate fragments. Both examples are in the blog post.

Spans
You can apply styles to inline text by creating spans using [] to surround the text you want to style and {} to define the style you want to apply.
Jul 8, 2022

Two YAML entries. First one is for the project configuration, the second one is metadata for a single page. First one defines project, type: website, resoures: *.pdf. Second one defined title: Syllabus, resources: syllabus.pdf.

Site resources
To publish a file not explicitly linked from pages in your Quarto site, add a resources entry to your _quarto.yml file.
Jul 7, 2022

YAML with format html and option self-contained set to true.

Self-contained HTML
If you want to create an entirely self-contained HTML document (with images, CSS, etc. embedded into the HTML file), add the following to the YAML of your document.
Jul 6, 2022

Screenshot of the FAQ for R Markdown users page. with the description &#039;Answers to R Markdown users' most frequently asked questions about Quarto.' The questions answered are: What can I use Quarto for?, Quarto sounds similar to R Markdown. What is the difference and why create a new project?, Is R Markdown going away? Will my R Markdown documents continue to work?, Should I switch from R Markdown to Quarto?, I use X (bookdown, blogdown, etc.). What is the Quarto equivalent?, Can you create custom formats for Quarto like you can for R Markdown?, When would be a good time to start new projects in Quarto rather than R Markdown?, Does the RStudio IDE support Quarto?, Does RStudio Connect support Quarto?

R Markdown to Quarto
If you are an R Markdown user starting to use Quarto for your new projects or if you are converting an existing R Markdown project to Quarto, I highly recommend reading the FAQ for R Markdown Users.
Jul 5, 2022

Two slides. First one is a slide with the title Penguins and a plot that shows the relationship between bill depth and bill length for penguins, colors by species. Clusters of species are marked with red annotation on the slide. The second one is slide with chalkboard background and the word Hello! is written in white chalk.

Slide annotation
The chalkboard: true option for revealjs slides enables you to annotate your slides by drawing on them as well as open up an empty chalkboard within your presentation.
Jul 4, 2022

YAML file showing listings as the top field and contents as a sub-field under that with the value posts/*/index.qmd. An arrow points to the contents sub-field and text annotation reads customizable.

Listing contents
Quarto blogs by default will create a new blog post entry for each .qmd file in the posts folder. However you can customize which files are included in the listing by specifying the contents for the listing in the YAML where the listing is created.
Jul 3, 2022

Slide with content presented in two columns. On the left is the code, which has the chunk options output-location: column as well as fig-width: 6 and fig-height: 4. The code uses ggplot2 to create a scatterplot of penguin bill depth vs. length, colored by species. On the right is output showing this plot.

Output location
Showing code and output side-by-side or delayed reveal of the output are commonly used techniques for teaching programming when the mode of delivery is slides. The output-location chunk option makes it easy to achieve these.
Jul 2, 2022

A file called content-to-repeat.qmd is shown. The file includes one sentence: Look at me, I&#039;m content to be repeated. This sentence is in italics. Arrows and file icons depict how this file can be included in two different files with the same include shortcode. The code can be found in the linked blog post.

Includes
If you have content you want to include across many files, you can place that content in a separate Quarto file and use the include comment wherever you want to pull it in.
Jul 1, 2022

YAML file with two execute options. The first one is freeze: true and the comment that goes with it reads never re-render during project render. The other one is freeze: auto and the comment reads re-render only when source changes.

Freeze
For Quarto projects with many documents that include code, you probably won’t want to re-execute all of that code each time you render the project. The freeze execution option is helpful for managing that.
Jun 30, 2022

An R chunk with YAML-style chunk options echo: fenced, label: simple-arithmetic, results: hide. The R code in the chunk is 1 + 1. The fences of the chunk are also visible.

Fenced echo
If you, like me, spend most of your time writing teaching materials or documentation, I’m sure you’ll find the chunk option echo: fenced just as useful as I do! When you set this option for a code chunk, the chunk is displayed with the fences around it – without a screenshot or using a special verbatim engine.
Jun 29, 2022

Two tables side by side. On the left is the first six rows and first three columns of the mtcars dataset. On the right is the first six rows and all two columns of the cars dataset.

Side-by-side tables
Use the layout-ncol chunk option to organize output in columns, e.g., layout-ncol: 2 for two tables side-by-side.
Jun 28, 2022
No matching items