Markdown Browser Viewer

Open the active Markdown file in an external browser so browser read-aloud and accessibility tools can work with rendered Markdown while VS Code stays your editor.

Features

• Opens local Markdown files from one command: Markdown: Open Markdown In Browser.
• Renders Markdown through VS Code's built-in Markdown renderer in renderedHtml mode, with extension-managed support for GitHub-style footnotes, local syntax highlighting, and optional line-number gutters for code blocks.
• Opens raw .md files directly in rawMarkdown mode.
• Launches Microsoft Edge, Google Chrome, Firefox, Safari on macOS, the system default browser, or a trusted custom browser path.
• Rewrites relative local images to file:// URIs so rendered output still finds nearby assets.
• Includes a light/dark switch in rendered output and re-renders Mermaid diagrams after theme changes.
• Uses a bundled Mermaid runtime only; no CDN or custom JavaScript runtime is loaded.
• Sanitizes rendered Markdown HTML, adds a generated-page content security policy, and sanitizes Mermaid SVG before insertion.

Supported Browsers

Automated Playwright coverage runs against Chromium, Microsoft Edge, Google Chrome, and Firefox. Safari is supported as a macOS launch target and should be checked manually before release because this Windows development machine cannot automate Safari.

Markdown Support

renderedHtml mode delegates Markdown parsing to VS Code's markdown.api.render command. That means core Markdown and enabled VS Code Markdown extensions render through the same supported VS Code path used by the editor. Active raw HTML such as scripts, iframes, objects, and event-handler attributes is stripped from the generated browser page. GitHub-style footnotes using [^label] references and [^label]: definitions are rendered into a navigable footnotes section in generated browser output. Supported fenced code languages are highlighted locally in the generated page, and code blocks can show a muted line-number gutter. Mermaid fences are reserved for diagram rendering and unsupported language identifiers remain readable plain code.

Mermaid Support

Supported Mermaid families are intentionally limited to non-experimental families that the bundled Mermaid runtime renders reliably:

flowchart, graph, sequenceDiagram, classDiagram, stateDiagram-v2, stateDiagram, erDiagram, journey, gantt, pie, quadrantChart, requirementDiagram, gitGraph, xychart, block, packet, and kanban.

Experimental, beta-declared, or not-bundled Mermaid families are not rendered as supported output. If they are used in a Mermaid fence, the generated page shows an inline unsupported-diagram message instead of silently treating them as supported.

See docs/MERMAID_SUPPORT_MATRIX.md for the full family inventory.

Settings

Custom browser path examples:

• macOS: /Applications/Microsoft Edge.app
• Windows: C:\\Program Files\\Mozilla Firefox\\firefox.exe
• Linux: /usr/bin/firefox

Keybinding

Add to keybindings.json:

{
  "key": "ctrl+alt+r",
  "command": "markdownBrowserViewer.openInBrowser",
  "when": "editorTextFocus && editorLangId == markdown"
}

Development

npm ci
npm run compile

Install Playwright browsers once per machine:

npx playwright install chromium firefox chrome msedge

On Linux CI or fresh Linux machines, install browser dependencies as well:

npx playwright install --with-deps chromium firefox chrome msedge

Run fast support-contract checks:

npm run test:unit

Run the VS Code command-path E2E check:

npm run test:e2e

Run the default gate:

npm run verify

Run the full supported-browser gate:

npm run verify:browsers

Documentation

• User Guide
• Developer Guide
• Rendering Test Matrix
• Mermaid Support Matrix
• Security Policy
• Support
• Contributing

License

MIT. See LICENSE.