From 50bb1ffd8aa00d85d3a17bc1a4e52d26187afa7e Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Wed, 31 Jan 2024 17:38:42 +0000
Subject: [PATCH] feat(usability): update functions for search (#774)
---
docs/features/callouts.md | 21 +++++++++++++++++++--
1 files changed, 19 insertions(+), 2 deletions(-)
diff --git a/docs/features/callouts.md b/docs/features/callouts.md
index 63051ad..64a5171 100644
--- a/docs/features/callouts.md
+++ b/docs/features/callouts.md
@@ -24,7 +24,24 @@
## 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
@@ -33,7 +50,7 @@
> [!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