Quarto Callout Blocks

A callout (called admonition by Docusaurus) is a special syntax used to highlight a paragraph, f.i. a Pay attention to... or Tip: Did you know that... box. On the Docusaurus side, I've covered that syntax in Some tips and tricks when written articles for Docusaurus.

On this blog powered by Docusaurus, the syntax for admonition is

<AlertBox variant="caution" title="Pay attention to...">
Never give your bank card code to a stranger.

</AlertBox>

and this is rendered like

And now a nice tip:

Quarto implements this a little differently, so let's have a look...

Syntax​

Unfortunately, the syntax is not part of the standard Markdown language, so every tool actually has its own.

For Quarto, the syntax is:

:::{.callout-caution}
## Pay attention to...
Never give your bank card code to a stranger.
:::

And, that paragraph is converted like this in PDF:

The Quarto syntax for a tip is:

:::{.callout-tip}
## Did you know that...
By going to bed earlier, you'll get better quality sleep.
:::

Callouts are supported in PDF, HTML, revealJS and other formats.

Get in-depth syntax on the official documentation.

VSCode snippet​

If you're a VSCode user, don't make an effort to remember the correct syntax but use the Snippet feature of VSCode.

Press CTRL-SHIFT-P to get access to the Command Palette.

Start to type Configure User Snippets, validate and select markdown.json since our snippets should be available only when writing Markdown content.

If this is your first snippet, the JSON file will be empty. Copy/paste the text below. Otherwise, just copy the callout node and paste it in your file to the correct location.

{
    "callout": {
        "prefix": "quarto-callout",?
        "body": [
            ":::{.callout-${1|note,tip,warning,caution,important|}}",?
            "## ${2:title}",?
            "${3:body}",?
            ":::"
        ],
        "description": "Add a callout paragraph to your markdown file"
    }
}

Save and close the markdown.json file and go back to any Markdown file (or create a new one).

Now, by typing quarto and by pressing CTRL-space, VSCode will show the list of possibilities for that word and you'll retrieve your snippet. Select it and press Enter to validate.

And, as you can see on the image below, VSCode will ask you three things:

1. First the type of callout and you'll have a list of possible values; easy no?
2. Then, after having pressed the tab key, you'll be prompted to type a title and, finally,
3. The body of your paragraph.

VSCode will show you the snippet interactively and you can then, easily, create it without having to remember the correct syntax.

:::{.callout-caution}
## Pay attention to...
Never give your bank card code to a stranger.
:::