site/docs/features/callouts.md

97 lines
2.1 KiB
Markdown
Raw Normal View History

2024-04-05 00:03:11 +00:00
---
title: Callouts
tags:
- feature/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 [[ObsidianFlavoredMarkdown]] is _after_ [[SyntaxHighlighting]].
## 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`.
```scss title="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](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.
> [!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"