Overview

• What: Obsidian‑style callouts you can write directly in Markdown and render as styled blocks.
• Where: Blog posts only (regular pages untouched).
• Why: Clearer notes, warnings, tips, and quotes with consistent visuals.

Quick Start

> [!note] Optional title
> First body line
> Second body line

• Every body line belongs to the callout only if it starts with >.
• The header line must be the first line and look like > [!type] Title.

Available Variants

• note, info, tip, success, warning, danger, bug, idea, question
• quote (special): supports an optional author line; not collapsible
• example, theorem, proof, caution, todo, summary

Collapsible Callouts

• Add + (expanded) or - (collapsed) either inside or after the brackets:
  • > [!note+] Title or > [!note]+ Title
  • Works for any type except quote: e.g., > [!warning]-

Examples:

> [!note]+ Expanded by default
> This content is visible on load.

> [!warning]- Collapsed by default
> This is hidden until the header is clicked.

Quote Callouts With Author

• Put the author on the final line inside the callout, starting with an em dash — or --:

> [!quote]
> "Curiosity is a disciplined form of disobedience."
> —Vera Rubin

• Quotes are not collapsible in this tutorial.

Nesting Callouts

• Use multiple > characters to nest another callout inside the outer one.
• Keep every nested line prefixed with the same nesting level.

> [!note] Outer
> Intro text
>
>> [!tip] Inner tip
>> Keep two `>` on all inner lines.
>> - Lists work
>> - Code works
>>
>> ```python
>> def f(x):
>>     return x*x
>> ```
>
> Back to the outer callout after a blank `>` line.

Lists and Code Inside Callouts

• Lists: keep the > on each list line.
• Code blocks: fence them as usual, still with > at the start of each line.

> [!success] Tips
> - Keep input small and testable
> - Prefer pure functions
>
> ```js
> export const add = (a, b) => a + b
> ```

Customizing Styles and Icons

• Colors, borders, and typography: _sass/_callouts.scss.
• Icons and default labels: _plugins/callouts.rb (ICONS and LABELS maps).
• Add a new type: add an entry in ICONS/LABELS and style .callout-yourtype.

Troubleshooting

• Renders as a regular blockquote:
  • The header must be on the first line and start with > [!type].
  • Body lines must all start with >.
  • Blank lines inside a callout still need a leading > (use a bare > line).
  • If you pasted from elsewhere, ensure no smart quotes or odd whitespace.
• Collapsible not working:
  • Use + or - as [!type+] or [!type]+ (both forms are accepted).
  • Quotes are not collapsible in this tutorial.

Reference Cheatsheet

> [!note] Title
> Body

> [!info]+ Title (expanded)
> Body

> [!danger]- Title (collapsed)
> Body

> [!quote]
> "Quoted text"
> —Author Name, Work

> [!example] Example
> Example text

> [!theorem] Theorem title
> Statement

> [!proof] Proof
> Sketch

> [!caution] Caution
> Be careful

> [!todo] To‑do
> - Task A
> - Task B

> [!summary] Summary
> Key points

See Also

• Demo post with lots of examples