| | |
|---|
| | | ## 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! |
|---|
| | | > > |
|---|
| | | > > > [!example] You can even use multiple layers of nesting. |
|---|
| | | |
|---|
| | | > [!EXAMPLE] Examples |
|---|
| | | > |
|---|
| | | > Aliases: example |
|---|
| | | > [!note] |
|---|
| | | > Aliases: "note" |
|---|
| | | |
|---|
| | | > [!note] Notes |
|---|
| | | > |
|---|
| | | > Aliases: note |
|---|
| | | > [!abstract] |
|---|
| | | > Aliases: "abstract", "summary", "tldr" |
|---|
| | | |
|---|
| | | > [!abstract] Summaries |
|---|
| | | > |
|---|
| | | > Aliases: abstract, summary, tldr |
|---|
| | | > [!info] |
|---|
| | | > Aliases: "info" |
|---|
| | | |
|---|
| | | > [!info] Info |
|---|
| | | > |
|---|
| | | > Aliases: info, todo |
|---|
| | | > [!todo] |
|---|
| | | > Aliases: "todo" |
|---|
| | | |
|---|
| | | > [!tip] Hint |
|---|
| | | > |
|---|
| | | > Aliases: tip, hint, important |
|---|
| | | > [!tip] |
|---|
| | | > Aliases: "tip", "hint", "important" |
|---|
| | | |
|---|
| | | > [!success] Success |
|---|
| | | > |
|---|
| | | > Aliases: success, check, done |
|---|
| | | > [!success] |
|---|
| | | > Aliases: "success", "check", "done" |
|---|
| | | |
|---|
| | | > [!question] Question |
|---|
| | | > |
|---|
| | | > Aliases: question, help, faq |
|---|
| | | > [!question] |
|---|
| | | > Aliases: "question", "help", "faq" |
|---|
| | | |
|---|
| | | > [!warning] Warning |
|---|
| | | > |
|---|
| | | > Aliases: warning, caution, attention |
|---|
| | | > [!warning] |
|---|
| | | > Aliases: "warning", "attention", "caution" |
|---|
| | | |
|---|
| | | > [!failure] Failure |
|---|
| | | > |
|---|
| | | > Aliases: failure, fail, missing |
|---|
| | | > [!failure] |
|---|
| | | > Aliases: "failure", "missing", "fail" |
|---|
| | | |
|---|
| | | > [!danger] Error |
|---|
| | | > |
|---|
| | | > Aliases: danger, error |
|---|
| | | > [!danger] |
|---|
| | | > Aliases: "danger", "error" |
|---|
| | | |
|---|
| | | > [!bug] Bug |
|---|
| | | > |
|---|
| | | > Aliases: bug |
|---|
| | | > [!bug] |
|---|
| | | > Aliases: "bug" |
|---|
| | | |
|---|
| | | > [!quote] Quote |
|---|
| | | > |
|---|
| | | > Aliases: quote, cite |
|---|
| | | > [!example] |
|---|
| | | > Aliases: "example" |
|---|
| | | |
|---|
| | | > [!quote] |
|---|
| | | > Aliases: "quote", "cite" |
|---|
