Alerts¶

Use alerts for notes with predefined titles and semantic colors. Their bodies support Markdown. For a custom title, use an admonition instead.

Enable¶

Enable the extension bundled with Pixel Lab:

markdown_extensions:
  - mkdocs_pixel_lab.github_alerts

Write an alert¶

> [!TIP]
>
> A useful shortcut or recommendation.

The supported types are NOTE, TIP, IMPORTANT, WARNING, and CAUTION.

Customization¶

Each alert type has a rail/title color and a surface color. These theme settings customize every alert of that type:

theme:
  name: pixel-lab
  alert_tip_color: "#287c35"
  alert_tip_surface_color: "#e7f5df"
  alert_warning_color: "#a65f00"
  alert_warning_surface_color: "#fff0bf"

Parameter	Default	Effect
`alert_note_color`	Blue · `#2377c8`	Note rail and title
`alert_note_surface_color`	Pale blue · `#e4f2ff`	Note background
`alert_tip_color`	Dark green · `#287c35`	Tip rail and title
`alert_tip_surface_color`	Pale green · `#e7f5df`	Tip background
`alert_important_color`	Purple · `#6d28d9`	Important rail and title
`alert_important_surface_color`	Pale lavender · `#f0e8ff`	Important background
`alert_warning_color`	Amber brown · `#a65f00`	Warning rail and title
`alert_warning_surface_color`	Pale yellow · `#fff0bf`	Warning background
`alert_caution_color`	Dark red · `#b42318`	Caution rail and title
`alert_caution_surface_color`	Pale pink · `#ffe3df`	Caution background

For the body text, outline, and shadow:

Parameter	Default	Effect
`text_color`	Dark green-gray · `#182018`	Alert body text
`border_color`	Near-black · `#101410`	Alert outline, except the type-specific left rail
`shadow_color`	Near-black · `#101410`	Alert pixel shadow

See Common attributes.

Component-wide overrides¶

To customize all tip alerts, add this to your custom stylesheet:

.gh-alert--tip {
  --alert-color: #287c35;   /* Dark green */
  --alert-surface: #e7f5df; /* Pale green */
}

Scoped overrides¶

Wrap each selected alert, following Scope selected instances:

<div class="instance-alert" markdown="1">

> [!TIP]
>
> Keep the configuration in one place.

</div>

Add the scoped rule to your stylesheet:

.instance-alert > .gh-alert--tip {
  --alert-color: #287c35;   /* Dark green */
  --alert-surface: #e7f5df; /* Pale green */
}