Markdown Browser Viewer

Open the active Markdown file in an external browser so you can use browser read-aloud tools while keeping VS Code as your editor.

Why This Extension Exists

VS Code is a strong writing environment, but browser read-aloud and accessibility tooling can be better for listening workflows. This extension gives you a single command to open your current Markdown file in the browser mode you choose.

Core Capabilities

• Cross-platform browser launch support for macOS, Windows, and Linux.
• Browser targets: Edge, Chrome, Firefox, system default, or a custom executable.
• Open modes:
  • renderedHtml (recommended): render Markdown with VS Code's built-in renderer, then open standalone HTML.
  • rawMarkdown: open the .md file directly.
• Offline Mermaid support via bundled runtime (assets/mermaid.min.js).
• Local image reliability via relative-path rewrite to absolute file:// URIs.
• Light/dark theme toggle in generated output with persisted preference and Mermaid re-rendering.
• Per-run temporary HTML output with automatic cleanup of older files.

Command

• Markdown: Open Markdown In Browser

Settings

Custom browser path examples:

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

Recommended Keybinding

Add to keybindings.json:

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

Documentation Map

• User guide: docs/USER_GUIDE.md
• Developer guide: docs/DEVELOPER_GUIDE.md
• Rendering expectations: docs/RENDERING_TEST_MATRIX.md
• Publishing checklist: PUBLISHING.md
• Security policy: SECURITY.md
• Agent guidance: AGENTS.md
• Claude compatibility note: CLAUDE.md

Development

npm install
npm run compile

Press F5 in VS Code to launch the Extension Development Host (watch task is preconfigured).

Available debug configurations:

• Run Markdown Browser Viewer (No Build): starts from current out/ JS without running npm tasks.
• Run Markdown Browser Viewer (Watch Build): runs npm: watch before launch (requires local npm install in this repo).

Verification

npm run verify

verify compiles TypeScript, builds the VSIX package, and runs Playwright visual smoke tests. Use npm run verify after each modification before commit/push.

Install Playwright browser prerequisites once per machine:

# macOS / Windows
npx playwright install chromium

# Linux (installs required system libraries + Chromium)
npx playwright install --with-deps chromium

For manual rendering regression checks:

1. Open test-fixtures/markdown-stress-test.md.
2. Run Markdown: Open Markdown In Browser.
3. Validate output against docs/RENDERING_TEST_MATRIX.md.

Troubleshooting

• If you see VS Code Markdown renderer is unavailable, ensure built-in extension Markdown Language Features (vscode.markdown-language-features) is enabled and reload the Extension Development Host.
• Mermaid runtime is bundled at assets/mermaid.min.js. If Mermaid blocks render as plain code, reinstall/update the extension package and reload VS Code.
• Theme preference uses browser localStorage when available (some browsers restrict storage for file:// pages).
• If an old output tab remains open, rerun the command and use the newest tab.