[ENHANCEMENT] Add GitHub-style Markdown alert rendering

[melck]

Problem (one or two sentences)

Roo Code currently renders GitHub-style Markdown alerts as regular blockquotes instead of visually distinct alert blocks.

This makes generated documentation, task summaries, READMEs, issue content, and other GitHub-flavored Markdown harder to read when they use alert syntax such as [!NOTE], [!TIP], [!WARNING], or [!CAUTION].

Context (who is affected and when)

This affects users who write, review, paste, or generate Markdown content in Roo Code, especially when working with GitHub-oriented documentation, READMEs, issue content, changelogs, or task summaries.

It happens whenever rendered Markdown contains GitHub-style alert syntax, for example:

Note

This is useful information users should know.

Warning

This is important and needs attention.

Today these alerts are displayed as normal blockquotes, so their semantic meaning and visual priority are lost.

Desired behavior (conceptual, not technical)

Roo Code should recognize and render GitHub-style Markdown alerts as visually distinct alert blocks in Markdown-rendered surfaces.

The following alert types should be supported:

• NOTE
• TIP
• IMPORTANT
• WARNING
• CAUTION

For example, this Markdown:

Note

This is useful information.

should render as a dedicated “Note” alert block instead of a plain blockquote.

Likewise:

Warning

Be careful before running this command.

should render as a warning alert block with styling that clearly distinguishes it from normal text and normal blockquotes.

Constraints / preferences (optional)

The implementation should stay aligned with the existing Markdown rendering approach in webview-ui/src/components/common/MarkdownBlock.tsx.

Roo Code already uses react-markdown with remarkPlugins, so a compatible remark plugin for GitHub-style alerts would be preferred if one is available and maintained.

The styling should use VS Code theme variables where possible so alerts remain readable in light, dark, and high-contrast themes.

Alert rendering should remain accessible and should not interfere with copying, selecting, or editing the original Markdown source.

Unsupported or malformed alert syntax should gracefully fall back to normal Markdown rendering.

Normal blockquotes that do not start with a supported alert marker should continue to render exactly as they do today.

Request checklist

• I've searched existing Issues and Discussions for duplicates
• This describes a specific problem with clear context and impact

Roo Code Task Links (optional)

Given Markdown content containing a supported GitHub-style alert such as:

Note

This is a note.

When the content is rendered by Roo Code
Then it is displayed as a visually distinct alert block labeled “Note”

And the following alert types are supported:

• NOTE
• TIP
• IMPORTANT
• WARNING
• CAUTION

And alert rendering works for multi-line alert content

And alert rendering works when the alert contains common Markdown content, including:

• links
• inline code
• lists
• bold and italic text
• fenced code blocks where supported by the existing Markdown renderer

And alert blocks are readable in light, dark, and high-contrast VS Code themes

And normal blockquotes that do not begin with a supported alert marker continue to render as normal blockquotes

And unsupported or malformed alert markers do not break Markdown rendering and fall back gracefully

And the original Markdown remains editable as normal Markdown source

Acceptance criteria (optional)

Given Markdown content containing a supported GitHub-style alert such as:

Note

This is a note.

When the content is rendered by Roo Code
Then it is displayed as a visually distinct alert block labeled “Note”

And the following alert types are supported:

• NOTE
• TIP
• IMPORTANT
• WARNING
• CAUTION

And alert rendering works for multi-line alert content

And alert rendering works when the alert contains common Markdown content, including:

• links
• inline code
• lists
• bold and italic text
• fenced code blocks where supported by the existing Markdown renderer

And alert blocks are readable in light, dark, and high-contrast VS Code themes

And normal blockquotes that do not begin with a supported alert marker continue to render as normal blockquotes

And unsupported or malformed alert markers do not break Markdown rendering and fall back gracefully

And the original Markdown remains editable as normal Markdown source

Proposed approach (optional)

Roo Code already renders Markdown through webview-ui/src/components/common/MarkdownBlock.tsx, using react-markdown with remark-gfm, remark-math, and rehype-katex.

Since the renderer already supports remarkPlugins, GitHub-style Markdown alerts could likely be added by introducing a compatible remark plugin for alerts, then styling the generated alert nodes/classes with VS Code theme variables.

If no suitable maintained plugin is available, the same behavior could be implemented as a small local remark plugin that detects blockquotes starting with [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], or [!CAUTION] and annotates them for custom rendering.

This should keep the feature scoped to the existing Markdown rendering pipeline and avoid changing normal blockquote behavior.

Trade-offs / risks (optional)

The main risk is diverging from GitHub’s Markdown alert behavior if the feature is implemented manually rather than through a well-maintained remark plugin.

A plugin-based implementation should be checked for compatibility with the current Roo Code stack, especially react-markdown v9, ESM, and the existing remark/rehype pipeline.

Another consideration is styling: alert colors and contrast need to work across VS Code light, dark, and high-contrast themes.

Care should be taken not to enable unsafe raw HTML rendering just to support alerts. The implementation should avoid requiring rehype-raw unless there is a clear security review.

The change should also avoid altering the rendering of regular blockquotes.

[roomote-v0]

I've analyzed this issue and here's my proposed implementation plan:

1. Install remark-github-alerts (v0.1.1) as a dependency in webview-ui/. This is a maintained remark plugin that transforms GitHub-style alert blockquotes ([!NOTE], [!TIP], [!IMPORTANT], [!WARNING], [!CAUTION]) into structured nodes with CSS classes. It's compatible with react-markdown v9 and the existing remark pipeline.

2. Add the plugin to MarkdownBlock.tsx in the remarkPlugins array alongside remarkGfm and remarkMath. The plugin generates <div> elements with class names like markdown-alert, markdown-alert-note, etc., and a title element with class markdown-alert-title.

3. Add alert styling to the StyledMarkdown component using VS Code theme CSS variables for colors so alerts remain readable in light, dark, and high-contrast themes. Each alert type (NOTE, TIP, IMPORTANT, WARNING, CAUTION) gets a distinct left-border color and icon/label. Normal blockquotes that don't start with a supported alert marker are unaffected.

4. Add tests to verify that alert markdown is rendered correctly, that normal blockquotes are unaffected, and that malformed alert syntax falls back gracefully.

This approach keeps changes scoped to the existing Markdown rendering pipeline, uses a well-maintained community plugin rather than a custom parser, and avoids rehype-raw or any unsafe HTML rendering.

Please mention @roomote in a comment saying that you approve this plan, and I'll proceed with the implementation.

[melck]

@roomote Thanks for the proposed plan. I approve the general direction of implementing this in the existing MarkdownBlock.tsx rendering pipeline, but I would prefer not to commit to remark-github-alerts as the default approach yet.

remark-github-alerts appears technically compatible, but it is still a relatively small package at v0.1.1 with limited adoption. Since the alert syntax is simple and Roo Code already uses unist-util-visit, could you first evaluate implementing this as a small local remark plugin instead of adding a new dependency?

Preferred approach:

• add a local remark plugin that visits blockquote nodes
• detect [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], and [!CAUTION]
• add alert-specific classes or metadata for rendering
• keep normal blockquotes unchanged
• avoid rehype-raw
• style alerts with VS Code theme variables
• include tests for supported alerts, normal blockquotes, malformed syntax, and multiline content

If the local implementation turns out to be significantly more complex or less robust than using remark-github-alerts, please explain the trade-off before adding the dependency.

[roomote-v0]

I've seen your comment and will implement this as a local remark plugin instead of adding remark-github-alerts. I'll explore the codebase now and open a PR to share progress. Thanks for the clear direction!

[roomote-v0]

Opened PR #12274 with my attempt at addressing this using a local remark plugin as suggested. No new dependencies added -- the plugin visits blockquote nodes, detects alert markers, and annotates them for styled rendering. 32 tests cover unit and integration scenarios. Feedback welcome!

#12274