From 9ff1fdd280f4b4c554f1bddfa51689fcb1576558 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 02 Feb 2024 18:52:51 +0000
Subject: [PATCH] fix(search): oops restore ability to preview on hover lol
---
docs/features/callouts.md | 24 +++++++++++++++++++++---
1 files changed, 21 insertions(+), 3 deletions(-)
diff --git a/docs/features/callouts.md b/docs/features/callouts.md
index 63051ad..d739792 100644
--- a/docs/features/callouts.md
+++ b/docs/features/callouts.md
@@ -24,16 +24,34 @@
## 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.
+> > [!todo]- Yes!, they can. And collapsed!
> >
> > > [!example] You can even use multiple layers of nesting.
--
Gitblit v1.10.0