Skip to main content

Quarto Callout Blocks

· 3 min read
Christophe
Christophe
Markdown, WSL and Docker lover ~ PHP developer ~ Insatiable curious.

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 this blog powered by Docusaurus, the syntax for admonition is

:::caution[Pay attention to...]
Never give your bank card code to a stranger.
:::

and this is rendered like

Pay attention to...

Never give your bank card code to a stranger.

And now a nice tip:

Did you know that...

By going to bed earlier, you'll get better quality sleep.

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

Docker image with Quarto

If you don't have yet a Docker image with Quarto, read this article Running Quarto Markdown in Docker.

Syntax​

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

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:

Callout Caution 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.
:::

Callout Tip in PDF

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 effort to remind 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.

Creating a snippet

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.

Call the snippet

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

  1. First the tip 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.

Using the snippet

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

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