1929241a62
* docs: first few plugins documented * docs: move plugin info * docs: move plugin docs to tag based system * docs: update latex example code snippet * docs: fix spelling of latex in title * docs: add missing linebreak * docs: remove plugin tag from feature pages * docs: shorten titles * docs: refine wording * docs: move plugin details for frontmatter * docs: add features/* tags * docs: update latex example * docs: make references more explicit * docs: add stubs for the remaining plugins * docs: more descriptions * docs: fix feature tags * docs: descriptions * docs: new plugin pages * docs: update configuration page * docs: more plugin work * docs: run prettier * docs: remove comments in config file and add link to docs * docs: minor fixes * docs: run prettier * docs: spelling * docs: update docs/plugins/AliasRedirects.md Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * docs: update docs/plugins/Assets.md Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * docs: update docs/plugins/CNAME.md Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * docs: update docs/plugins/Static.md Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * docs: update docs * docs: update docs/features/Mermaid diagrams.md Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * docs: update docs/plugins/RemoveDrafts.md Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * docs: update docs/plugins/Assets.md Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * docs: update docs/configuration.md Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * docs: update docs/configuration.md Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * docs: update docs/configuration.md Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * docs: some updates * docs: work in review comments --------- Signed-off-by: Eiko Wagenknecht <git@eiko-wagenknecht.de> Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
97 lines
2.1 KiB
Markdown
97 lines
2.1 KiB
Markdown
---
|
||
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"
|