feat: add GitHub-style Markdown alert rendering#12274
Draft
roomote-v0[bot] wants to merge 1 commit intomainfrom
Draft
feat: add GitHub-style Markdown alert rendering#12274roomote-v0[bot] wants to merge 1 commit intomainfrom
roomote-v0[bot] wants to merge 1 commit intomainfrom
Conversation
Implements a local remark plugin that detects [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], and [!CAUTION] markers in blockquotes and renders them as visually distinct alert blocks. - Local remarkGithubAlerts plugin visits blockquote nodes - Adds data attributes and CSS classes for alert styling - Custom blockquote component renders alert title and content - Styles use VS Code theme variables for light/dark/HC themes - Normal blockquotes remain unchanged - No new dependencies added - 32 tests covering unit and integration scenarios
2 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related GitHub Issue
Closes: #12267
Description
This PR attempts to address Issue #12267 by implementing GitHub-style Markdown alert rendering as a local remark plugin, per the feedback in the issue discussion.
Key implementation details:
remarkGithubAlerts.ts): Visitsblockquotenodes in the AST, detects[!NOTE],[!TIP],[!IMPORTANT],[!WARNING], and[!CAUTION]markers, strips the marker text, and annotates nodes withdata-alert-typeand CSS classes viahProperties.MarkdownBlock.tsx: Checks for thedata-alert-typeprop. Alert blockquotes render as styled<div>elements with a title label; normal blockquotes pass through unchanged.--vscode-textLink-foreground,--vscode-testing-iconPassed,--vscode-editorInfo-foreground,--vscode-editorWarning-foreground,--vscode-editorError-foreground) with sensible fallbacks for light, dark, and high-contrast themes.unist-util-visitand the remark plugin interface already in the codebase.rehype-rawrequired.Trade-off note: The local plugin is straightforward (~110 lines) and avoids adding
remark-github-alerts(v0.1.1, limited adoption). The alert syntax is simple enough that a local implementation is robust without significant complexity.Test Procedure
extractAlertTypecovering all alert types, case insensitivity, malformed markers, unsupported types, marker removal, break node handling, and edge cases.MarkdownBlock.spec.tsxcovering all five alert types rendering, normal blockquotes unchanged, multiline content, inline formatting, same-line content, and fallback for unsupported markers.Run tests:
Pre-Submission Checklist
Feedback and guidance are welcome.
Interactively review PR in Roo Code Cloud