Custom Blocks

The theme includes styled callout blocks that match VitePress custom containers — colored boxes for tips, warnings, danger notices, and more. They use a built-in alert.html include that produces the exact VitePress HTML structure.

Syntax

{% include alert.html type="tip" content="This is a helpful tip." %}

The type controls the color and default title. The content is processed as Markdown, so inline formatting like backticks and links work naturally.

Available types

INFO

This is an info block. Use it for neutral, supplementary information.

NOTE

This is a note block. Visually identical to info — use whichever label fits better.

TIP

This is a helpful tip block.

IMPORTANT

This is an important block. Don’t skip this.

WARNING

This is a warning block. Something could go wrong.

DANGER

This is a danger block. Data loss or security risk.

CAUTION

This is a caution block. Visually identical to danger.

Details

This is a collapsible details block.

Custom titles

Each type has a default title (TIP, WARNING, etc.). Override it with the title parameter:

{% include alert.html type="warning" title="Breaking Change" content="The `foo` option was removed in v2.0." %}

Breaking Change

The foo option was removed in v2.0.

Markdown in content

The content parameter supports inline Markdown — code, links, bold, and so on:

{% include alert.html type="tip" content="Set `layout: home` in your frontmatter. See the [Frontmatter Reference](/frontmatter-reference/) for details." %}

TIP

Set layout: home in your frontmatter. See the Frontmatter Reference for details.