Skip to content

feat: add GFM alerts support in markdown preview#744

Open
touero wants to merge 1 commit intoiamcco:masterfrom
touero:feature
Open

feat: add GFM alerts support in markdown preview#744
touero wants to merge 1 commit intoiamcco:masterfrom
touero:feature

Conversation

@touero
Copy link
Copy Markdown

@touero touero commented Apr 8, 2026

Summary

This PR adds support for GitHub Flavored Markdown (GFM) Alerts in markdown-preview.nvim rendering.
close #632, close #663, close #715

image

Supported syntax examples:

Note

This is a note.

Warning

This is a warning.

What Changed

  • Added GFM alert parsing in the Markdown rendering pipeline.
  • Added alert styles (light/dark theme tokens + block/title styles).
  • Added dependency declaration for markdown-it-github-alerts.
  • Added documentation updates in README (feature list + references).
  • Updated exported frontend assets under app/out/*.

Files changed

  • app/pages/index.jsx
    • Registered alert plugin in markdown-it chain.
    • Switched to a local compatibility wrapper import.
  • app/pages/markdown-it-github-alerts-compat.js (new)
    • Added compatibility wrapper adapted from markdown-it-github-alerts (MIT attribution included).
  • app/_static/markdown.css
    • Added alert color variables for light/dark themes.
    • Added .markdown-alert* styles.
  • package.json
    • Added markdown-it-github-alerts dependency (pinned for compatibility).
  • yarn.lock
    • Updated lockfile for the new dependency.
  • README.md
    • Added GFM Alerts to features and references.
  • app/out/*
    • Regenerated static export artifacts.

Implementation Details

The target app uses an older build stack (Next 7 / webpack 4).
Directly importing newer package builds caused parse/build issues in this environment, so this PR uses a compatibility wrapper in app/
pages/markdown-it-github-alerts-compat.js, adapted from markdown-it-github-alerts behavior, and wires it into the existing markdown-it
plugin chain.

This keeps the rendering behavior aligned with GitHub-style alerts while remaining compatible with the current project toolchain.

Verification

  • Build succeeded with legacy OpenSSL flag:
    • NODE_OPTIONS=--openssl-legacy-provider yarn build-app
  • Alert rendering check passed:
    • generated HTML contains markdown-alert markdown-alert-note
    • generated HTML contains markdown-alert-title
  • Manual preview validation:
    • Opened preview and confirmed NOTE/WARNING blocks render as styled alert boxes.

Notes

  • This PR intentionally keeps compatibility with the current legacy frontend build toolchain.
  • Wrapper source attribution is included in the compat file header (MIT upstream).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

1 participant