This documentation is also published as Markdown for efficient machine reading: the whole site is indexed at /llms.txt, and every page has a clean Markdown copy at the same URL with .md appended. These are generated from the same source and cost far fewer tokens to read than this rendered HTML.

Skip to main content Skip to navigation
Guides

Add a colored callout for a note, tip, warning, or caution

GitHub-style alerts: open a blockquote whose first line is `[!KIND]` in uppercase. Pennington recognizes five kinds and paints each one differently.

To surface a note, tip, or warning inline without reaching for a Razor component, open a standard blockquote whose first line is [!KIND] in uppercase. The five built-in kinds — NOTE, TIP, IMPORTANT, WARNING, CAUTION — fix the visual treatment; pick the one whose signal strength matches the message. The marker must be the first inline of the first paragraph — no leading text.

Before you begin

  • An existing Pennington site renders markdown (see Create your first Pennington site if not).
  • The pipeline was built through AddPennington / AddDocSite / AddBlogSite, so UseCustomAlerts() is already wired into the default MarkdownPipelineFactory.
  • The default MonorailCSS integration or a stylesheet targets the markdown-alert / markdown-alert-{kind} classes.

The five alert kinds

Each kind below shows the source markdown above the rendered output. Every line after the marker is regular markdown — inline formatting, links, lists, and code spans all work because the rest of the blockquote passes through the standard Markdig pipeline unchanged.

Note

markdown 
> [!NOTE]
> Notes carry side information worth a glance before continuing.

Note

Notes carry side information worth a glance before continuing.

Tip

markdown 
> [!TIP]
> Tips point at a smart default or a pattern that keeps the common case simple.

Tip

Tips point at a smart default or a pattern that keeps the common case simple.

Important

markdown 
> [!IMPORTANT]
> Important callouts flag content that is required for the rest of the page.

Important

Important callouts flag content that is required for the rest of the page.

Warning

markdown 
> [!WARNING]
> Warnings flag output that is likely incorrect if the advice is ignored.

Warning

Warnings flag output that is likely incorrect if the advice is ignored.

Caution

markdown 
> [!CAUTION]
> Cautions surface destructive operations — wire-format breaks, security risks.

Caution

Cautions surface destructive operations — wire-format breaks, security risks.

What the renderer emits

Each alert wraps in three CSS classes: markdown-alert (always present), markdown-alert-{kind} where {kind} is the lower-cased token, and not-prose (which isolates the alert from the surrounding page-prose typography rules). Stylesheets target the first two classes for the color treatment. An unrecognized token falls back to a plain <blockquote> with no alert styling, so the marker stays visible instead of turning into a misleading callout.

markdown 
> [!INFO]
> Unknown kind: this falls back to a plain blockquote.

[!INFO] Unknown kind: this falls back to a plain blockquote.

See Markdown extensions catalog for the full kind-to-class table.

Verify

  • Each alert renders as a colored callout with no [!KIND] text in the body.
  • View source — the outer element carries class="markdown-alert markdown-alert-note" (or the matching kind).
  • An unrecognized kind like [!INFO] falls back to a plain <blockquote>, signaling that the parser rejected the marker.