InkStone

Callouts

Contents

Callouts are styled highlight boxes rendered from Obsidian's > [!type] blockquote syntax. Everything is processed server-side — no client-side plugins needed.


Basic callout

> [!note] Title text
> Body content here.
> More body content.
Title text

Body content here. More body content.


Collapsible callout

Add - after the closing ] to make the callout collapsed by default (rendered as a closed <details> element):

> [!warning]- Click to expand
> Hidden content here.
Click to expand

Hidden content here.

Add + to pin it open (rendered as an open <details> element — user can still collapse):

> [!tip]+ Always visible
> This starts open but can be collapsed.
Always visible

This starts open but can be collapsed.


Callout types

InkStone supports the full set of Obsidian callout types. Each gets a distinct icon and accent colour:

note

General annotations

tip

Helpful hints

info

Informational content

warning

Cautions and caveats

danger / error

Critical warnings

success / check

Positive outcomes

question / faq

Questions and FAQs

quote / cite

Quoted text

important

High-priority notes

abstract / summary

Summaries and abstracts

todo

Action items

example

Code or usage examples

bug

Known issues

Any custom type not in the list above is still rendered — it just uses the default styling.


Omitting the title

Leave the title empty to render the callout type name as the title:

> [!tip]
> Body content here.

Body content here.


Multi-paragraph body

Each > line in the blockquote is part of the callout body. Standard markdown (bold, code, links) renders inside the body.

> [!example] Code example
> Here is a usage pattern:
>
> ```python
> print("hello")
> ```
>
> And an explanation.
Code example

Here is a usage pattern:

print("hello")

And an explanation.


CSS customisation

Callout styles live in frontend/static/callouts.css (default Catppuccin-inspired theme) and frontend/static/omarchy-callouts.css (Omarchy theme). Override these files to change colours, icons, or layout.

Each callout renders with the class callout callout-{type}, so per-type targeting is straightforward:

.callout-warning { border-left-color: #f5a623; }

See also