072ee64127
* Add icons as masks
To handle a simple way to add custom icons, i made it pure css. Icon are now a mask for the callout-icon div, so they always follow the --color form the current callout.
Now to add a custom icon, you simply add
```css
.callout {
&[data-callout="custom"] {
--color: #customcolor;
--border: #custombordercolor;
--bg: #custombg;
--callout-icon: url('data:image/svg+xml; utf8, <custom formatted svg>');
}
```
to custom.scss
* remove now unused code
* Make callouts an enum
* docs: update instructions for custom callouts
* Prettier & run format
* dynamic matching
For maintainability, make dynamic mathching. If we or Obsidian want to support more callouts, we simply add it to the enum
* callout mapping const
Getting ride of the enum entierly as it's not worth here?
* fix callout icon styling
* Add forgotten icons
* Rebase
* harmonize callout icon and fold icon
* fix docs + prettier
* Update docs/features/callouts.md
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
* Update quartz/plugins/transformers/ofm.ts
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
* Suggestions fix
* remove unecessary rules
* comment is always nice
* Update docs/features/callouts.md
---------
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
2.1 KiB
| title | tags | |
|---|---|---|
| Callouts |
|
Quartz supports the same Admonition-callout syntax as Obsidian.
This includes
- 12 Distinct callout types (each with several aliases)
- Collapsable callouts
> [!info] Title
> This is a callout!
See documentation on supported types and syntax here.
Warning
Wondering why callouts may not be showing up even if you have them enabled? You may need to reorder your plugins so that
Plugin.ObsidianFlavoredMarkdown()is afterPlugin.SyntaxHighlighting().
Customization
- Disable callouts: simply pass
callouts: falseto the plugin:Plugin.ObsidianFlavoredMarkdown({ callouts: false }) - 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.
.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 to help you do that.
Showcase
[!info] Default title
[!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] Notes
Aliases: note
[!abstract] Summaries
Aliases: abstract, summary, tldr
[!info] Info
Aliases: info, todo
[!tip] Hint
Aliases: tip, hint, important
[!success] Success
Aliases: success, check, done
[!question] Question
Aliases: question, help, faq
[!warning] Warning
Aliases: warning, caution, attention
[!failure] Failure
Aliases: failure, fail, missing
[!danger] Error
Aliases: danger, error
[!bug] Bug
Aliases: bug
[!quote] Quote
Aliases: quote, cite