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>
103 lines
2.1 KiB
Markdown
103 lines
2.1 KiB
Markdown
---
|
||
title: Callouts
|
||
tags:
|
||
- plugin/transformer
|
||
---
|
||
|
||
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](https://help.obsidian.md/Editing+and+formatting/Callouts).
|
||
|
||
> [!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 _after_ `Plugin.SyntaxHighlighting()`.
|
||
|
||
## Customization
|
||
|
||
- Disable callouts: simply pass `callouts: false` to 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`.
|
||
|
||
```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?
|
||
>
|
||
> > [!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
|