From fa2ea2896f0977253733334199d28e509351e621 Mon Sep 17 00:00:00 2001
From: Silviu Lorenț <124451350+smilorent@users.noreply.github.com>
Date: Sat, 17 Feb 2024 18:23:45 +0000
Subject: [PATCH] feat: add user-defined config for syntax highlighting plugin (#869)
---
docs/features/callouts.md | 22 ++++++++++++++++++++--
1 files changed, 20 insertions(+), 2 deletions(-)
diff --git a/docs/features/callouts.md b/docs/features/callouts.md
index 27de687..d739792 100644
--- a/docs/features/callouts.md
+++ b/docs/features/callouts.md
@@ -24,14 +24,32 @@
## 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!
> >
--
Gitblit v1.10.0