logo svelte /markdown v1.6.0
FIG-001/ COMPONENT

component renderer.

Pass the built-in AlertRenderer through the renderers prop. Best when alerts need to look identical across pages and the styling lives in one place.

  • markedAlert() extension parses > [!NOTE] syntax into alert tokens — five severities: NOTE, TIP, IMPORTANT, WARNING, CAUTION.
  • Pass the built-in AlertRenderer through renderers and every page gets the identical look + icon set.
  • Best for docs sites: alert styling lives in one component, easy to dark-mode tune, accessible by default.
↩ all examples
override · component mode · live running source

GitHub Alerts

GitHub-style alerts highlight critical information in documentation.

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.

Mixed Content

Regular markdown works alongside alerts: bold, italic, and inline code.

category · component
sheet · sheet 01 / 02
⟳ to re-run
FIG-002/ SNIPPET

snippet override.

An inline {#snippet alert(props)} block lets each page render alerts however it wants — different icon set, different layout, full markup control.

  • {#snippet alert({ variant, text })} gives this page full control over markup — different icons, layout, or even an entirely different design.
  • Use when you need page-specific alert styling that shouldn't leak into the site-wide component.
↩ all examples
override · inline snippet mode · live running source

GitHub Alerts

GitHub-style alerts highlight critical information in documentation.

Mixed Content

Regular markdown works alongside alerts: bold, italic, and inline code.

category · snippet
sheet · sheet 02 / 02
⟳ to re-run

GitHub Alerts