Custom Callout Extension

The {quarto-custom-callout} extension enhances Quarto’s built-in callout functionality by allowing you to create and use custom callouts in your Quarto documents. With this extension, you can define your own callout types with custom colors, icons, and appearances.

Installation

To install the {quarto-custom-callout} extension, follow these steps:

Open your terminal.
Navigate to your Quarto project directory.
Execute the following command:

quarto add coatless-quarto/custom-callout

This command will download and install the extension under the _extensions subdirectory of your Quarto project. If you’re using version control, make sure to include this directory in your repository.

Usage

The {quarto-custom-callout} extension allows you to define custom callouts in your YAML front matter and then use them in your Quarto documents. Here’s a quick overview of the available YAML options:

Option	Description	Default	Possible Values	Example
`title`	Default title for the callout	Callout name	Any string	`title: "Important Note"`
`icon`	Display an icon	`false`	`true`, `false`	`icon: true`
`icon-symbol`	Custom symbol or text for the icon	None	Any string, unicode, or FontAwesome class	`icon-symbol: "📝"`
`color`	Color for the callout’s left border and background	None	Any valid CSS color name or hex	`color: "#FFA500"`
`appearance`	Callout appearance	`"default"`	`"default"`, `"simple"`, `"minimal"`	`appearance: "simple"`
`collapse`	Make the callout collapsible	`false`	`true`, `false`	`collapse: true`

You can start using custom callouts in your Quarto project immediately after installation. First, define your custom callouts in the YAML front matter:

custom-callout:
  todo:
    icon-symbol: "📝"
    color: "pink"
  thumbs-up:
    title: "Great job!"
    icon-symbol: "fa-thumbs-up"
    color: "#008000"
filters:
- custom-callout

Then, use the custom callouts in your Quarto documents like this:

::: todo
Remember to complete this section.
:::

::: thumbs-up
Great job on completing this task!
:::

::: {.todo title="Collapsed Custom Todo (Click to Expand)" collapse="true"}
This is a custom 'todo' callout that is collapsible and has a custom title.
:::

Examples

Here are some examples of custom callouts in action:

Todo

Remember to complete this section.

Great job!

Great job on completing this task!

Collapsed Custom Todo (Click to Expand)

This is a custom ‘todo’ callout that is collapsible and has a custom title.

For more detailed information on how to use and customize the {quarto-custom-callout} extension, please refer to our Custom Callout Examples or FAQ.