Obsidian-Style Callouts Demo
A quick tour of Obsidian-like callouts you can write directly in Markdown.
This post demonstrates the Obsidian-style callouts you can now write directly in Markdown.
Basic form:
> [!note] Optional title
> Body line 1
> Body line 2
Note that every body line should start with > to be part of the callout.
Available variants
- note:
[!note] - info:
[!info] - tip:
[!tip] - success:
[!success] - warning:
[!warning] - danger:
[!danger] - bug:
[!bug] - idea:
[!idea] - question:
[!question] - quote:
[!quote](optional author line inside callout starting with—or--; not collapsible) - example:
[!example] - theorem:
[!theorem] - proof:
[!proof] - caution:
[!caution] - todo:
[!todo] - summary:
[!summary]
Collapsible syntax
- Add
+(expanded) or-(collapsed) either inside or after the brackets:-
[!note+] Titleor[!note]+ Title - Works for any type except quote: e.g.,
[!warning]-,[!tip]-
-
Examples below.
Callouts support inline formatting like bold, italic, and code.
No title provided here, so the default label is used.
- Keep each content line prefixed with
> - You can nest deeper quotes with
>>if needed - Works with links like al-folio
def hello():
return "world"
This one calls attention to potential pitfalls or footguns.
Use when something can truly break or data may be lost.
Reproduction steps:
- Do X
- Then Y
- Observe Z
Nested quote inside the callout remains a nested blockquote.
Think of this as a space for early sketches and hypotheses.
How should we treat edge cases in the parser? Send thoughts.
“One must shed the bad taste of wanting to agree with many. ‘Good’ is no longer good when one’s neighbor mouths it.”
More variants
Consider a simple function f(x) = x^2 with f’(x) = 2x.
In a right-angled triangle, a^2 + b^2 = c^2.
Rotate and tile squares on each side; compare areas.
This action is irreversible. Double-check your inputs before proceeding.
- Add collapsible callouts
- Add admonitions in the docs
We added Obsidian-like callouts with a flexible set of variants. Quote callouts can include an author line using an em dash.
Collapsible notes
Collapsible (expanded by default)
This note is foldable and starts expanded. Click the header to toggle.
Collapsible (collapsed by default)
This note is foldable and starts collapsed.
More collapsible variants
Collapsible info (expanded)
Helpful context that’s visible by default.
Collapsible warning (collapsed)
Use with care; starts collapsed.
Collapsible tip
- Keep inputs sanitized
- Prefer pure functions for testability
Collapsible danger
Risk of data loss. Proceed only if you have a backup.
“Curiosity is a disciplined form of disobedience.”
Collapsible example
f(x) = x^2 ⇒ f’(x) = 2x
Collapsible theorem
The angles of a triangle sum to 180° in Euclidean geometry.
Collapsible summary
Key notes are tucked away until needed.
Nested callouts
You can nest another callout by increasing the quote level.
Keep inner lines with two > so they remain inside the outer callout.
- Works with lists
- And code blocks:
const ok = true;
Back to the outer callout content after the nested block.
Similar Posts
Here are some more articles you might like to read next: