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 under /_llms/. 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.