Initial commit

Striven

yesterday c538c151c7462ad0395ff2c15c5e11e89e362aa8

 docs/features/callouts.md

@@ -1,7 +1,7 @@
---
title: Callouts
tags:
  - plugin/transformer
  - feature/transformer
---

Quartz supports the same Admonition-callout syntax as Obsidian.
@@ -19,68 +19,78 @@
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()`.
> 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

- Disable callouts: simply pass `callouts: false` to the plugin: `Plugin.ObsidianFlavoredMarkdown({ callouts: false })`
- Editing icons: `quartz/plugins/transformers/ofm.ts`
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?
> [!question]+ Can callouts be _nested_?
>
> > [!todo]- Yes!, they can.
> > [!todo]- Yes!, they can. And collapsed!
> >
> > > [!example] You can even use multiple layers of nesting.

> [!EXAMPLE] Examples
>
> Aliases: example
> [!note]
> Aliases: "note"

> [!note] Notes
>
> Aliases: note
> [!abstract]
> Aliases: "abstract", "summary", "tldr"

> [!abstract] Summaries
>
> Aliases: abstract, summary, tldr
> [!info]
> Aliases: "info"

> [!info] Info
>
> Aliases: info, todo
> [!todo]
> Aliases: "todo"

> [!tip] Hint
>
> Aliases: tip, hint, important
> [!tip]
> Aliases: "tip", "hint", "important"

> [!success] Success
>
> Aliases: success, check, done
> [!success]
> Aliases: "success", "check", "done"

> [!question] Question
>
> Aliases: question, help, faq
> [!question]
> Aliases: "question", "help", "faq"

> [!warning] Warning
>
> Aliases: warning, caution, attention
> [!warning]
> Aliases: "warning", "attention", "caution"

> [!failure] Failure
>
> Aliases: failure, fail, missing
> [!failure]
> Aliases: "failure", "missing", "fail"

> [!danger] Error
>
> Aliases: danger, error
> [!danger]
> Aliases: "danger", "error"

> [!bug] Bug
>
> Aliases: bug
> [!bug]
> Aliases: "bug"

> [!quote] Quote
>
> Aliases: quote, cite
> [!example]
> Aliases: "example"

> [!quote]
> Aliases: "quote", "cite"