Appendix C: Callout boxes

C.1 Introduction

Overview

I have embedded most of the pre-defined cross-references in callout boxes. The exceptions are figure (fig) and table (tbl)

What follows is an overview of

  • the cross-reference abbreviation,
  • the (changed) title and
  • the appearance of the different callout boxes.
- crossref-cnj-title: "R Code"             # replaces "Conjecture"
- crossref-cor-title: "Assessment"         # replaces "Corollary"
- crossref-def-title: "Experiment"         # remains  "Definition"
- crossref-exm-title: "R Code Collection"  # replaces  "Example"
- crossref-exr-title: "Exercise"           # remains  "Exercise"
- crossref-fig-title: "Screenshot"         # replaces "Figure"
- crossref-rem-title: "Remark  "           # remains  "Remark"
- crossref-lem-title: "Resource"           # replaces "Lemma"
- crossref-lst-title: "Listing / Output"   # replaces  "Listing"
- crossref-prp-title: "Procedure"          # replaces "Proposition"
- crossref-sol-title: "Solution"           # remains  "Solution"
- crossref-tbl-title: "Table"              # remains  "Table"
- crossref-thm-title: "Formula"            # replaces "Theorem" (needs "formula")

The following table lists all callout boxes. Besides of the difference between numbered boxes and unnumbered boxes there are two different types of (numbered) boxes:

  • Boxes with cross-references that are pre-defined in Quarto. They are listed in the Quarto documentation under Theorems and Proofs. Examples are Exercise (exr), Definition (def) and Conjecture (con).
    • I have redefined most of the pre-defines labels in quarto.yml under the metadata heading language. For instance I replaced Definition with Experiment, Conjecture with R Code, but kept Exercise.
    • The first three columns in reflect these changes and document the current status. I have sorted the table by my box titles (first column).
  • Boxes that use cross-references defined by me. Examples are Bullet Lists (bul) and Checklists (tdo).

The fourth column snippet shows the shortcut to call the Markdown snippet I have prepared. (Learn more about RStudio code snippets.) For each of these snippets there exist a corresponding CSS style. As I am not very experienced in CSS I gratefully adapted code by Andreas Handel (). (I just noticed there there was recently an update () that I still need to read.)

The fifth column is a reference to an empty example showing just the bones of the callout-boxes. It is not necessary to jump to the location. If you hover with the mouse over the link Quarto will show you a small version of the callout box.

Table C.1: Overview of call-out boxes metadata used in this book
My Title Quarto Ref Snippet Reference to example
Assessment Corollary my-assessment
Assessment Corollary cor num-assessment
Bullet List ———- my-bullet
Bullet List ———- bul num-bullet
Checklist ———- my-check
Checklist ———- tdo num-check
Exercise Exercise my-exercise
Exercise Exercise exr num-exercise
Exercise Exercise exr ab-exercise
Exercise Exercise exr abc-exercise
Experiment Definition my-experiment
Experiment Definition def num-experiment
Important ———- my-important
Listing / Output Listing lst ——————-
Objectives ———- obj my-objectives
Package Profile ———- my-package
Package Profile ———- packagebox
Procedure Proposition my-procedure
Procedure Proposition prp num-procedure
R Code Conjecture my-r-code
R Code Conjecture cnj num-r-code
R Code Conjecture cnj num-r-code-listing
R Code Collection Example exm ab-code
R Code Collection2 ———- col ab-code2
R Code Shiny Conjecture cnj num-r-shiny
Remark Remark my-remark
Remark Remark rem num-remark
Report ———- rep num-report
Resource Lemma my-resource
Resource num-resource
Screenshot Figure figure
Screenshot figure-border
Solution sr2
Solution my-solution
Solution num-solution
Table Table ——————-
Tip ———- my-tip
Typo ———- my-typo
Theorem Theorem formula
Theorem Theorem my-theorem
Theorem Theorem num-theorem
Watch Out ———- my-watch
Watch Out ———- num-watch

C.2 Assesment

C.2.1 my-assessment

Title for assessment comes here

Here include text for assessment

C.2.2 num-assessment

Assessment C.1 : Numbered Assessment Title

Here include assessment text

C.3 Bullet

C.3.1 my-bullet

Title for bullet text

Here include bullet text

C.3.2 num-bullet

Bullet List C.1

: Title for bullet text

Here include bullet text

C.4 Check

C.4.1 my-check

Title for checklist text

Here include checklist text

C.4.2 num-check

Checklist C.1

: Title for checklist text

Here include checklist text

C.5 Example

C.5.1 my-example

Title for my example

Here include text

C.5.2 num-example

Code Collection C.1 : Numbered Example Title

Here include example text

C.5.3 ab-example

Code Collection C.2 : Numbered Example Title

R Code C.1 : Numbered R Code Title (Original)

Listing / Output C.1: Listing text
Code
1 + 1
#> [1] 2

R Code C.2 : Numbered R Code Title (Tidyverse)

Listing / Output C.2: Listing text
Code
1 + 1
#> [1] 2

C.6 Exercise

C.6.1 my-exercise

Exercise Title

Here include exercise text

C.6.2 num-exercise

Exercise C.1 : Numbered Exercise Title

Here include exercise text

C.6.3 ab-exercise

Exercise C.2 : Numbered Exercise Title

R Code C.3 : Numbered R Code Title 1

Code
1 + 1
#> [1] 2

R Code C.4 b: Numbered R Code Title (Tidyverse)

Code
1 + 1
#> [1] 2

C.6.4 abc-exercise

Exercise C.3 : Title of abc-exercise

R Code C.5 : Title of code exercise

Solution C.1. : Title of solution

Solution C.2. : Title of Shiny app

Loading...




C.7 Experiment

C.7.1 my-experiment

Title of Experiment

Here include text for experiment

C.7.2 num-experiment

Experiment C.1 : Numbered Experiment Title

Here include text for experiment

C.7.3 ab-experiment

Experiment C.2 : Numbered Experiment Title

R Code C.6 : Numbered R Code Title 1

Listing / Output C.3: Title for listing
Code
1 + 1
#> [1] 2

R Code C.7 b: Numbered R Code Title (Tidyverse)

Listing / Output C.4: Title for listing
Code
1 + 1
#> [1] 2

C.8 Important

C.8.1 my-important

Important Title

Here include text for important box

C.9 Objectives

C.9.1 my-objectives

Learning Objectives:

Here include text for objectives

C.10 Package

C.10.1 my-package

Package Name

Here include package description

C.10.2 packagebox

The following snippet packagebox is used in extra annex chapter where all used package are listed with their profiles. The snippet is a kind of template to facilitate writing package profiles. Because of the internal links I have added here the {dplyr} packages as a complete example.

The following first line of package-name was originally a two-level header including a reference generated by the snippet. The idea is that I can refer from every chapter to the package by a simple syntax format: @sec-annex-[package-name]

To prevent destroying the table of content for this document I have changed this header to a normal line but with capital letters. Additionally I have deleted the anchor for the reference {#sec-annex-package-name}.

package-name {#sec-annex-package-name}

I changed all the following line:

- "## package-name {#sec-annex-package-name}" to "PACKAGE-NAME"
- 

PACKAGE-NAME

Package Profile: package-name


title ()

(There is no HEXAGON sticker available for {package-name}.)

short description


personal comment

C.11 Proposition / Procedure

C.11.1 my-procedure

Procedure Title

Here include procedure text

C.11.2 num-procedure

Procedure C.1 : Numbered Procedure Title

Here include procedure text

C.12 R Code

C.12.1 my-r-code

Title for R-Code

Code
1 + 1
#> [1] 2

C.12.2 num-r-code

R Code C.8 : Numbered R Code Title

Code
1 + 1
#> [1] 2

C.12.3 num-r-code-listing

R Code C.9 : Numbered R Code Listing Title

Listing / Output C.5: Listing title
Code
1 + 1
#> [1] 2

C.12.4 ab-code

Code Collection C.3 : Title for code collection

R Code C.10 : Numbered R Code Title (Original)

Code
1 + 1
#> [1] 2

R Code C.11 : Numbered R Code Title (Tidyverse)

Code
1 + 1
#> [1] 2

C.12.5 ab-code2

The following snippet is not used in this book. I have it just included because it may be of interest how to develop a call-out box with own numbering system. The interesting part is not here but in the quarto.css file of this book.

Collection Code C.1

R Code C.12 : Numbered R Code Title (Original)

Listing / Output C.6: Listing text
Code
1 + 1
#> [1] 2

R Code C.13 : Numbered R Code Title (Tidyverse)

Listing / Output C.7: Listing text
Code
1 + 1
#> [1] 2

C.13 Screenshot

C.13.1 figure

alt-text
Picture C.1: Demonstration

C.13.2 figure-border

alt-text
Picture C.2: title

C.14 Listing / Listing/Output

There is no snippet for listings. Listings is included in num-r-code-listing (see: ).

C.15 Remark

C.15.1 my-remark

Title for remark

Here include remark lines

C.15.2 num-remark

Remark C.1. : Numbered Remark Title

Here include remark text

C.16 Report

C.16.1 num-report

Report C.1

: Numbered Reportbox Title

Here include report box text

C.17 Resource

C.17.1 my-resource

Title for resource

Here include resource text

C.17.2 num-resource

Resource C.1 : Numbered Resource Title

Here include text for the resource

C.18 R Code Shiny

C.18.1 num-r-shiny

R Code C.14 : Numbered R Code Title

Loading...




C.19 Solution

C.19.1 sr2

Exercise ID: Header

Description more in Detail


My Solution

Here comes the solution

The above box is intended for the text description of a task or challenge, followed by the R code as the solution. But it has no numbering!

C.19.2 my-solution

Solution:

Here include solution text

C.19.3 num-solution

Solution C.3. : Numbered Solution Title

Here include text for the solution

C.20 Table / Table

No changes, no snippet.

C.21 Tip

C.21.1 my-tip

Title for Tip / Hint

Here include text for tip / hint box

C.22 Theorem

C.22.1 formula

(C.1)formula

Read Mathematics in R Markdown

The numbering for theorems / formula is different than from the other cross-references / callout boxes.

C.22.2 my-theorem

Title of theorem

Here include theorem text

C.22.3 num-theorem

Formula C.1 : Numbered Theorem Title

(C.2)Here include text for the theorem

C.23 Typo

C.23.1 my-typo

Typo Title

Here include typo text

C.24 Watch

C.24.1 my-watch

Title for watch-out text

Here include watch-out text

C.24.2 num-watch

Watch-out C.1

: Title for watch-out text

Here include watch-out text

C.25 Quarto callout boxes

The following boxes are pre-designed in Quarto. They can be adapted in three ways:

  1. The color of the text inside the box.
  2. Whether they are numbered or not.
  3. If the first line is a header then it becomes the title of the callout box.

Next I will show the tip box as a unnumbered demo box with a title and colored text. You can provide whatever color you want.

This is the unnumbered note box with colored text.

Consectetur cursus iaculis ad? Potenti taciti orci lobortis aenean sociis egestas: maecenas pulvinar lobortis, lectus auctor ultricies blandit elementum! Orci nibh risus convallis semper duis ut, ultrices tincidunt fames curae. Na curae.

In the following listing I will provide the untitled and uncolored numbered version.

C.25.1 note

Note C.1

Dolor mus interdum in sollicitudin: dictum interdum, ante, integer sed, sed dignissim fames. Placerat viverra aptent. Lectus vehicula cras, mi est vivamus ultricies, nunc sollicitudin auctor. Tortor.

C.25.2 tip

Tip C.1

Dolor interdum nulla ridiculus, magnis habitant a. Mollis habitant – cubilia nulla nibh id sapien. Pellentesque facilisi fusce fermentum nibh sodales. Na sodales.

C.25.3 warning

Here I have changed the title from “Warning” to “Watch-out”. This done in _quarto.yml file:

language:
   callout-warning-title: "Watch out!"   # orange

For a list of all the different language specific expressions see the Quarto `CLI GitHub resource language page. (CLI stands for Command Line Interface.)

Watch out! C.1

Adipiscing lobortis facilisis, commodo aliquet ligula odio. Est in ultricies augue – volutpat tristique faucibus? Est habitant vestibulum feugiat elementum aliquam penatibus. Na penatibus.

C.25.4 caution

Caution C.1

Ipsum aptent himenaeos, feugiat cras primis fusce, vitae in. Gravida pretium dignissim sem platea velit, diam sed mollis? Per aptent aenean augue: mollis: senectus potenti taciti elementum? Na elementum!

C.25.5 important

Important

Amet sociosqu nascetur purus fringilla, commodo: aliquam nisi blandit a. Inceptos risus eros quam sagittis vitae turpis dignissim? Bibendum hac dis: tellus commodo primis conubia proin eu auctor. Na auctor?

C.25.6 report

The following box counts with my own numbering. I have added the following line to the _quarto.yml file. The box is still experimental and has not the same appearance as the other Quarto callout boxes. Additionally it it refers only to the CSS selector .callout that I have not defined and seems to be part of the Bootstrap framework. I have to investaige this further.

crossref:
  appendix-title: "Appendix"
  appendix-delim: ":"
  custom:
    - kind: float
      reference-prefix: Report
      key: rep
Report C.2: Does it work with header?

Consectetur lacus consequat nec diam et bibendum phasellus proin? Mollis cum, vel felis fermentum, pretium parturient leo ad. Vulputate imperdiet vehicula in, eu elementum lobortis dapibus consequat. Na consequat.

C.26 Unnumbered colored boxes

I just remembered (2025-06-30) that I have used nice uncolored boxes in my older rmarkdown books, for example in Exercises for ‘Introduction to The New Statistics’.

I am thinking if I should use them in this newer books.

C.26.1 Explanation and rationale

Colored paragraphs give you a visual overview of things to watch out.

The following explanation is a text snippet in RStudio and can be called with the block snippet.

This is a colored block for Quarto The idea is taken from my previous bookdown books See itns-exercises. Adapted for working easier with snippet shortcodes in Quarto Snippets are three times the first letter after ‘rmd’ For example “aaa” stands for “rmdattention” See: learning-shiny It needs special adaption in the CSS file (look for .rmdattention and friends)

Change label-name!

  • rmdattention: warning triangle with yellow background
  • rmddanger: stop sign with red background
  • rmdinfo: info symbol with dark blue background
  • rmdresource: book with gray background
  • rmdsuccess: checkmark with green background (this block here)
  • rmdweb: WWW icon with light blue background

C.26.2 Attention (warning)

The yellow-colored block with the warning triangle tells you how to avoid troubles before it starts.

C.26.3 Danger

The red-colored block with the stop sign explains procedures you should avoid, explain error messages and how to recover from the problem.

C.26.4 Info

The dark blue block with the info symbol offers you some essential information, tip, or hint. I use it also for decriptions of my experiences (motto: lesson learnend)

C.26.5 Resource

The gray box with the book icon refers to books and web reources alike.The difference to the web resources box is that it contains references to citations.

C.26.6 Success

This green-colored block with the checkmark presents a successful operation or solved problem.

C.26.7 Web

The light blue block with the WWW symbol explains a download and/or installations procedure. Sometimes it is also refering to a web resource (similar as in the resource-box) but this block refers always only to web pages without a citation reference.

attention-text

danger-text

infobox-text

resource-text

success-text

web-resouce-text

C.27 Glossary Entries

term definition
CLI The abbreviation CLI stands for Command Line Interface. A Command Line Interface is a text-based interface used for entering commands directly to a computer system. It allows users to interact with a computer's operating system or software by typing commands into a console or terminal. Unlike graphical user interfaces (GUIs), which use windows, icons, and mouse interactions, CLIs rely on text input and output.
CSS Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts. (<a href="https://en.wikipedia.org/wiki/CSS">Wikipedia</a>)

Session Info

Session Info

Code
sessioninfo::session_info()
#> ─ Session info ───────────────────────────────────────────────────────────────
#>  setting  value
#>  version  R version 4.5.1 (2025-06-13)
#>  os       macOS Sequoia 15.5
#>  system   aarch64, darwin20
#>  ui       X11
#>  language (EN)
#>  collate  en_US.UTF-8
#>  ctype    en_US.UTF-8
#>  tz       Europe/Vienna
#>  date     2025-07-02
#>  pandoc   3.7.0.2 @ /opt/homebrew/bin/ (via rmarkdown)
#>  quarto   1.8.4 @ /usr/local/bin/quarto
#> 
#> ─ Packages ───────────────────────────────────────────────────────────────────
#>  package      * version    date (UTC) lib source
#>  cli            3.6.5      2025-04-23 [1] CRAN (R 4.5.0)
#>  commonmark     1.9.5      2025-03-17 [1] CRAN (R 4.5.0)
#>  curl           6.4.0      2025-06-22 [1] CRAN (R 4.5.0)
#>  dichromat      2.0-0.1    2022-05-02 [1] CRAN (R 4.5.0)
#>  digest         0.6.37     2024-08-19 [1] CRAN (R 4.5.0)
#>  evaluate       1.0.4      2025-06-18 [1] CRAN (R 4.5.0)
#>  farver         2.1.2      2024-05-13 [1] CRAN (R 4.5.0)
#>  fastmap        1.2.0      2024-05-15 [1] CRAN (R 4.5.0)
#>  glossary     * 1.0.0.9003 2025-06-08 [1] local
#>  glue           1.8.0      2024-09-30 [1] CRAN (R 4.5.0)
#>  htmltools      0.5.8.1    2024-04-04 [1] CRAN (R 4.5.0)
#>  htmlwidgets    1.6.4      2023-12-06 [1] CRAN (R 4.5.0)
#>  jsonlite       2.0.0      2025-03-27 [1] CRAN (R 4.5.0)
#>  kableExtra     1.4.0      2024-01-24 [1] CRAN (R 4.5.0)
#>  knitr          1.50       2025-03-16 [1] CRAN (R 4.5.0)
#>  lifecycle      1.0.4      2023-11-07 [1] CRAN (R 4.5.0)
#>  litedown       0.7        2025-04-08 [1] CRAN (R 4.5.0)
#>  lorem          1.0.0      2023-03-09 [1] CRAN (R 4.5.0)
#>  magrittr       2.0.3      2022-03-30 [1] CRAN (R 4.5.0)
#>  markdown       2.0        2025-03-23 [1] CRAN (R 4.5.0)
#>  R6             2.6.1      2025-02-15 [1] CRAN (R 4.5.0)
#>  RColorBrewer   1.1-3      2022-04-03 [1] CRAN (R 4.5.0)
#>  rlang          1.1.6      2025-04-11 [1] CRAN (R 4.5.0)
#>  rmarkdown      2.29       2024-11-04 [1] CRAN (R 4.5.0)
#>  rstudioapi     0.17.1     2024-10-22 [1] CRAN (R 4.5.0)
#>  rversions      2.1.2      2022-08-31 [1] CRAN (R 4.5.0)
#>  scales         1.4.0      2025-04-24 [1] CRAN (R 4.5.0)
#>  sessioninfo    1.2.3      2025-02-05 [1] CRAN (R 4.5.0)
#>  stringi        1.8.7      2025-03-27 [1] CRAN (R 4.5.0)
#>  stringr        1.5.1      2023-11-14 [1] CRAN (R 4.5.0)
#>  svglite        2.2.1      2025-05-12 [1] CRAN (R 4.5.0)
#>  systemfonts    1.2.3      2025-04-30 [1] CRAN (R 4.5.0)
#>  textshaping    1.0.1      2025-05-01 [1] CRAN (R 4.5.0)
#>  vctrs          0.6.5      2023-12-01 [1] CRAN (R 4.5.0)
#>  viridisLite    0.4.2      2023-05-02 [1] CRAN (R 4.5.0)
#>  xfun           0.52       2025-04-02 [1] CRAN (R 4.5.0)
#>  xml2           1.3.8      2025-03-14 [1] CRAN (R 4.5.0)
#>  yaml           2.3.10     2024-07-26 [1] CRAN (R 4.5.0)
#> 
#>  [1] /Library/Frameworks/R.framework/Versions/4.5-arm64/library
#>  [2] /Library/Frameworks/R.framework/Versions/4.5-arm64/Resources/library
#>  * ── Packages attached to the search path.
#> 
#> ──────────────────────────────────────────────────────────────────────────────

References

Handel, Andreas. 2023. “How to Make Custom Callouts for Quarto Andreas Handel.” https://www.andreashandel.com/posts/2023-06-13-custom-callouts-quarto/.
———. 2025. “Custom Formatting of Components in Quarto with Divs Andreas Handel.” https://www.andreashandel.com/posts/2025-03-05-custom-quarto-divs/.
Wickham, Hadley, Romain François, Lionel Henry, Kirill Müller, and Davis Vaughan. 2023. “Dplyr: A Grammar of Data Manipulation.” https://doi.org/10.32614/CRAN.package.dplyr.