GitHub Alerts
Converts GitHub-style > [!NOTE] alert blockquotes into admonition markup.
The GitHub Alerts feature converts GitHub-style alert blockquotes — the > [!NOTE] syntax you see in README files — into the same admonition markup produced by the admonitions recipe (the directives map). This lets you author callouts with the familiar GitHub syntax and have them rendered identically to :::note-style directives.
Note
Enable it with the githubAlerts key in zfb.config.ts:
/ / zfb. config. ts export default defineConfig({ markdown: { features: { githubAlerts: true, }, }, });Syntax
Prefix a blockquote with [!TYPE] on its first line (the type is matched case-insensitively):
> [!NOTE]
> Useful information that users should know, even when skimming content.Variants
Five alert types are supported. Each maps to an admonition variant:
| Prefix | Variant |
|---|---|
[!NOTE] | note |
[!TIP] | tip |
[!IMPORTANT] | important |
[!WARNING] | warning |
[!CAUTION] | caution |
Warning
[!IMPORTANT] and [!CAUTION] map to important/caution admonition variants, which require their components to be registered in this project (pages/). zudo-doc registers Important/Caution stubs, so all five variants render here. If you adopt this feature in another project without registering those two components, [!IMPORTANT]/[!CAUTION] will 500 the SSR render — register them (or restrict authoring to NOTE/TIP/WARNING) first.
Live demo
All five variants are rendered live below:
Note
Useful information that users should know, even when skimming content.
Tip
Helpful advice for doing things better or more easily.
Important
Key information users need to know to achieve their goal.
Warning
Urgent info that needs immediate user attention to avoid problems.
Caution
Advises about risks or negative outcomes of certain actions.
Emitted markup
The output is identical to the admonitions recipe (the directives map) — for example > [!NOTE] produces:
<div data-admonition="note" class="admonition admonition-note">
<p class="admonition-title">…</p>
<div class="admonition-body">…</div>
</div>Notes
[!TYPE]is the only supported syntax. A trailing inline title like> [!NOTE] My Titleis treated as a plain blockquote, not an alert.Multiple paragraphs are supported — all body content lands inside the admonition.
GitHub Alerts and the admonitions recipe (the
directivesmap) coexist: GitHub alerts are processed before the admonitions pass, so you can enable both at once.