--- title: Callouts tags: - 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](https://help.obsidian.md/Editing+and+formatting/Callouts). > [!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`. ```scss title="quartz/styles/custom.scss" .callout { &[data-callout="custom"] { --color: #customcolor; --border: #custombordercolor; --bg: #custombg; --callout-icon: url("data:image/svg+xml; utf8, "); //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](https://yoksel.github.io/url-encoder/) 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