Testing out some cool Quarto features

After looking through one of Sarah’s posts I noticed she has some super cool features included in her Quarto digital lab notebook, so I’m doing a deep dive into the Quarto documentation!

Embedding source code

You can allow readers of a webpage to view all of the code used to create that HTML by including in the YAML:

format:
  html:
    code-tools:
      source: true

In the rendered HTML you’ll see an “</> Code” icon next to the post title, and clicking this icon will show the page’s source code!

(Since all of the code for this post should now be viewable directly from the HTML, I won’t be inserting code chunks for any other sections to show what code to use for each feature. )

Bootstrap icons

There are soooooo many cute icons to choose from (not really Quarto-specific, but you can use them in Quarto docs)

Tabsets

You can use tabsets to display sets of related information, separated by some features (e.g., programming language, treatment, species)

Python

def even_or_odd(number):
    if number % 2 == 0:
        result = "even"
    else:
        result = "odd"
    return result

R

even_or_odd <- function(number) {
  if (number %% 2 == 0) {
    result <- "even"
  } else {
    result <- "odd"
  }
  return(result)
}

You can also group tabsets by the tab names, so that when you switch tabs in one tabset, the other grouped tabsets will also switch to the same tab!

Python

An ok programming language

R

The far superior programming language

Bash

Bane of my existence

Python

A kind of snake

R

The sound a pirate makes

Bash

Bane of my existence

In-text annotation

You can enable in-text annotations in a post! Try highlighting a word – the options “Annotate” and “Highlight” should pop up (though you’ll need an account with hypothesis.is to use this feature – there are also options for instead using Utterances or Giscus for in-text annotation))

Figures

There are a bunch of different ways to attach links and captions to text/images very easily, and to quickly generate sets of figures.

Dead man walking

Videos

You can directly embed videos!

Diagrams

There are two types of diagrams that are supported by Quarto, Mermaid and Graphviz, and they both have webtools you can use to more easily design a diagram and get the code needed to generate it

flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}
  C --> D[Result one]
  C --> E[Result two]

Embedding from other posts/documents

There are awhole bunch of ways to embed figures/code outputs/etc. from other documents in your notebook into a new post (see more at above link).

Callouts

You can insert 5 diffferent types of callout blocks in your text to draw attention to certain information! (I think this is super cool!)

Note

Note that there are five types of callouts, including: note

Warning

warning

Important

important

Tip with Title

tip

(This is an example of a callout with a title)

Expand To Learn About Collapse

and caution

This is an example of a ‘folded’ caution callout that can be expanded by the user. You can use collapse="true" to collapse it by default or collapse="false" to make a collapsible callout that is expanded by default.

You can also adjust the appearance of callouts in your doc

Code annotation

You can insert footnote-like in-code anotations. This seems potentially redundant if you have good commenting in your code but it could still help make code explanations more digestible. You can also adjust how the annotation will appear using the code-annotations: command in the document YAML.

library(tidyverse)
library(palmerpenguins)
1penguins |>
2  mutate(
    bill_ratio = bill_depth_mm / bill_length_mm,
    bill_area  = bill_depth_mm * bill_length_mm
  )

1

Take penguins, and then,

2

add new columns for the bill ratio and bill area.

Author tools

There are a whooooolllllleeee bunch of different options for specifying different author/article information that’s normally included in scientific publications (authors, affiliations, corresponding, copyright, orcid ID, abstract, keywords, etc.). Here are some of the options I think I’m most likely to use in day-to-day notebook posts:

In-text citations:

Triploid oysters experience higher mortality under multiple-stressor conditions than diploids (George et al. 2023)

References

George, Matthew N., Olivia Cattau, Mollie A. Middleton, Delaney Lawson, Brent Vadopalas, Mackenzie Gavery, and Steven B. Roberts. 2023. “Triploid Pacific Oysters Exhibit Stress Response Dysregulation and Elevated Mortality Following Heatwaves.” Global Change Biology 29 (24): 6969–87. https://doi.org/10.1111/gcb.16880.