From c538c151c7462ad0395ff2c15c5e11e89e362aa8 Mon Sep 17 00:00:00 2001
From: Striven <sg.striven@cutecat.club>
Date: Sat, 04 Apr 2026 19:47:16 +0000
Subject: [PATCH] Initial commit
---
docs/features/callouts.md | 92 +++++++++++++++++++++++++--------------------
1 files changed, 51 insertions(+), 41 deletions(-)
diff --git a/docs/features/callouts.md b/docs/features/callouts.md
index 27de687..4caeeb4 100644
--- a/docs/features/callouts.md
+++ b/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. 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"
--
Gitblit v1.10.0