Callouts

Quartz supports the same Admonition-callout syntax as Obsidian.

This includes

• 13 distinct callout types (most with several aliases)
• Collapsable callouts

> [!info] Title
> This is a callout!

See documentation on supported types and syntax here.

Note

In the default config ObsidianFlavoredMarkdown (order: 40) runs after SyntaxHighlighting (order: 20). If callouts don’t show up and you changed either order, restore that sequence.

Customization

The callouts are a functionality of the ObsidianFlavoredMarkdown plugin. See the plugin page for how to enable or disable them.

You can edit the icons by customizing quartz/styles/callouts.scss.

Add custom callouts

By default, custom callouts are handled by applying the note style. To make fancy ones, you have to add these lines to custom.scss.

quartz/styles/custom.scss

.callout {
  &[data-callout="custom"] {
    --color: #customcolor;
    --border: #custombordercolor;
    --bg: #custombg;
    --callout-icon: url("data:image/svg+xml; utf8, <custom formatted svg>"); //SVG icon code
  }
}

Warning

Don’t forget to ensure that the SVG is URL encoded before putting it in the CSS. You can use tools like this one to help you do that.

Showcase

Info

Default title

Can callouts be nested?

Yes!, they can. And collapsed!

You can even use multiple layers of nesting.

Note

Aliases: “note”

Abstract

Aliases: “abstract”, “summary”, “tldr”

Info

Aliases: “info”

Todo

Aliases: “todo”

Tip

Aliases: “tip”, “hint”, “important”

Success

Aliases: “success”, “check”, “done”

Question

Aliases: “question”, “help”, “faq”

Warning

Aliases: “warning”, “attention”, “caution”

Failure

Aliases: “failure”, “missing”, “fail”

Danger

Aliases: “danger”, “error”

Bug

Aliases: “bug”

Example

Aliases: “example”

Quote

Aliases: “quote”, “cite”