From be9b6b3a1e2038ea0a985ebd37fb18a661bddd04 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 23 Feb 2024 17:32:22 +0000
Subject: [PATCH] fix(docs): make docs accurate to callout behaviour (closes #920)
---
docs/features/callouts.md | 85 +++++++++++++++++++++++-------------------
1 files changed, 47 insertions(+), 38 deletions(-)
diff --git a/docs/features/callouts.md b/docs/features/callouts.md
index 27de687..3fefda2 100644
--- a/docs/features/callouts.md
+++ b/docs/features/callouts.md
@@ -24,63 +24,72 @@
## Customization
- Disable callouts: simply pass `callouts: false` to the plugin: `Plugin.ObsidianFlavoredMarkdown({ callouts: false })`
-- Editing icons: `quartz/plugins/transformers/ofm.ts`
+- 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, <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