rizaldy.club/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.

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"