346 words · 2 min read · Sandbox reading stats

Callouts and nesting

What this demonstrates

@quartz-community/obsidian-flavored-markdown turns > [!type] blockquotes into <blockquote class="callout" data-callout="type"> with a generated title row, an icon and — for the +/- variants — a collapsible body. Nesting works because the transform runs on the blockquote tree, so a callout inside a callout is just a nested blockquote.

Callouts carry real information architecture value: the type is in the DOM as data-callout, so a reader’s stylesheet, a print sheet or a scraper can distinguish a warning from an aside without parsing prose.

Configuration used

  - source: "@quartz-community/obsidian-flavored-markdown"
    enabled: true
    options:
      enableInHtmlEmbed: false
      enableCheckbox: true
      mermaid: true
      callouts: true
      parseTags: true
      parseBlockReferences: true
    order: 30

Content used

> [!note] A note with a custom title
> 
> Body text.
 
> [!warning]- Collapsed by default
> 
> Hidden until the reader expands it.
 
> [!tip] Outer
> 
> > [!example] Nested one level
> > > [!quote] Nested two levels

Rendered result

A note with a custom title

The title after the type is arbitrary text. The type still lands in the DOM as data-callout="note", so styling and scraping stay type-driven.

Collapsed by default

This body is present in the HTML but starts collapsed, because the type was written with a trailing -. Nothing is lazily fetched — the text is in the emitted page, just not expanded.

Explicitly expanded

A trailing + marks the callout collapsible but open on load.

Nesting, three levels deep, each level a distinct type:

Outer tip

The outer body renders normally.

Nested example

A callout inside a callout.

Nested quote

And one inside that. Each level gets its own data-callout value, so the nesting is structural rather than cosmetic.

The remaining built-in types, to prove the icon and colour map is complete rather than a subset:

Abstract

Summary-style callout.

Question

Interrogative callout.

Success

Positive-outcome callout.

Failure

Negative-outcome callout.

Danger

High-severity callout.

Bug

Defect callout.

Info

Neutral informational callout.

A callout containing other block content — list, checkboxes, code and math — to show the body is a full markdown context, not a text span:

Mixed content inside a callout

• a list item
• a checked task (enableCheckbox: true)
• an unchecked task

PATH=/usr/bin:/bin /usr/bin/npm run install-plugins

Inline math still works here: $E=m{c}^2$.

What the rendered output proves

The emitted HTML contains multiple data-callout="..." attributes with distinct values (note, warning, tip, example, quote, abstract, question, success, failure, danger, bug, info), class="callout" blockquotes, callout-title rows, and is-collapsed on the - variant. The nested case shows a data-callout blockquote inside another data-callout blockquote in the DOM tree.

safe_for_shared_engine

true — callouts are opt-in per paragraph, already the transformer’s default, and add no global assets beyond the stylesheet the plugin always ships.