wiki/docs/features/callouts.md at 4e5643fb492415ac496b7b3f35cc0ae04e5a43c0

mirror of https://github.com/alrayyes/wiki.git synced 2024-11-23 03:56:23 +00:00

feat: Feature/custom callout icon (#727 )

* 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>

2024-01-30 22:10:13 -08:00

2.1 KiB

Raw Blame History

title

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.

.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

2.1 KiB Raw Blame History

Customization

Add custom callouts

Showcase

2.1 KiB

Raw Blame History