From 072ee6412780acf001d040dad652f911e2f676c9 Mon Sep 17 00:00:00 2001
From: LUCASTUCIOUS <peterlucas2804@gmail.com>
Date: Wed, 31 Jan 2024 06:10:13 +0000
Subject: [PATCH] feat: Feature/custom callout icon (#727)
---
docs/features/callouts.md | 19 ++++++++++++++++++-
1 files changed, 18 insertions(+), 1 deletions(-)
diff --git a/docs/features/callouts.md b/docs/features/callouts.md
index 27de687..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
--
Gitblit v1.10.0