quartz/docs/features/callouts.md

title	tags
Callouts	plugin/transformer

Quartz supports the same Admonition-callout syntax as Obsidian.

This includes

• 12 Distinct callout types (each with several aliases)
• Collapsable callouts

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

See documentation on supported types and syntax here.

[!warning] Wondering why callouts may not be showing up even if you have them enabled? You may need to reorder your plugins so that Plugin.ObsidianFlavoredMarkdown() is after Plugin.SyntaxHighlighting().

Customization

• Disable callouts: simply pass callouts: false to the plugin: Plugin.ObsidianFlavoredMarkdown({ callouts: false })
• Editing icons: 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.

.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

[!question]+ Can callouts be nested?

[!todo]- Yes!, they can. And collapsed!

[!example] You can even use multiple layers of nesting.

[!EXAMPLE] Examples

Aliases: example

[!note] Notes

Aliases: note

[!abstract] Summaries

Aliases: abstract, summary, tldr

[!info] Info

Aliases: info, todo

[!tip] Hint

Aliases: tip, hint, important

[!success] Success

Aliases: success, check, done

[!question] Question

Aliases: question, help, faq

[!warning] Warning

Aliases: warning, caution, attention

[!failure] Failure

Aliases: failure, fail, missing

[!danger] Error

Aliases: danger, error

[!bug] Bug

Aliases: bug

[!quote] Quote

Aliases: quote, cite