Support GitHub-style alert block-quotes

[Copilot]

The markdown crate renders GitHub-style alert syntax (> [!NOTE], > [!TIP], etc.) as plain <blockquote> elements. The preview template already ships with the GitHub Markdown CSS rules for .markdown-alert-* — they just never get applied.

Approach

Post-process the HTML output in markdown::convert() to detect and rewrite matching blockquotes. No new dependencies.

The five recognized types — NOTE, TIP, IMPORTANT, WARNING, CAUTION (case-insensitive) — are transformed from:

<blockquote>
<p>[!NOTE]
Highlights information that users should take into account.</p>
</blockquote>

into:

<div class="markdown-alert markdown-alert-note">
<p class="markdown-alert-title">Note</p>
<p>Highlights information that users should take into account.</p>
</div>

Changes

• src/markdown.rs

  • transform_alerts() — scans HTML for <blockquote>\n<p>[!TYPE] and rewrites recognized alert blocks; unrecognized types and plain blockquotes are left untouched
  • extract_alert_content() — normalizes the two paragraph layouts the markdown crate can produce (type + content in same <p> vs. type as its own <p>)
  • title_case() — formats the label string ("NOTE" → "Note")

• examples/alerts.in/alerts.md + examples/alerts.md — trycmd snapshot covering all five alert types

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Support alerts, highlighted block-quotes (GitHub-style)</issue_title>
<issue_description>GitHub supports highlighting block-quotes, for example:

[!NOTE]
Highlights information that users should take into account, even when skimming.

[!TIP]
Optional information to help a user be more successful.

[!IMPORTANT]
Crucial information necessary for users to succeed.

[!WARNING]
Critical content demanding immediate user attention due to potential risks.

[!CAUTION]
Negative potential consequences of an action.

It would be nice to render these properly.

Reference: https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts

See also wooorm/markdown-rs#168</issue_description>

Comments on the Issue (you are @copilot in this section)

@pmeinhardt Possible approaches:

1. Use markdown-rs to output AST via to_mdast() and customize HTML output
2. Try Cloudflare's lol_html crate
3. Check out Brave's kuchikiki for HTML manipulation</comment_new>

• Fixes Support alerts, highlighted block-quotes (GitHub-style) #80

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.