# GitHub Alerts
> Render GitHub-style alert admonitions in @humanspeak/svelte-markdown with markedAlert, using AlertRenderer components or inline Svelte 5 snippets.
**Source:** [https://markdown.svelte.page/examples/github-alerts](https://markdown.svelte.page/examples/github-alerts)
**Markdown mirror:** [https://markdown.svelte.page/examples/github-alerts.md](https://markdown.svelte.page/examples/github-alerts.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: 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.
**Metadata:** tag: `COMPONENT` | override: `component`
### Notes
- `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.
### Source
#### ComponentRendered.svelte
Source file: [src/lib/examples/github-alerts/demos/ComponentRendered.svelte](https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/lib/examples/github-alerts/demos/ComponentRendered.svelte)
```svelte
```
## FIG-002: snippet override.
An inline `{#snippet alert(props)}` block lets each page render alerts however it wants — different icon set, different layout, full markup control.
**Metadata:** tag: `SNIPPET` | override: `inline snippet`
### Notes
- `{#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.
### Source
#### SnippetRendered.svelte
Source file: [src/lib/examples/github-alerts/demos/SnippetRendered.svelte](https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/lib/examples/github-alerts/demos/SnippetRendered.svelte)
```svelte