Markdown Viewer by EDTR.md

The official EDTR.md Markdown viewer and live preview for VS Code. Powered by the same rendering engine as the EDTR.md online Markdown editor, it previews Markdown files with Mermaid diagrams, KaTeX and LaTeX math, Vega-Lite charts, ABC music notation, GitHub-style callouts, footnotes, task lists and syntax highlighting.

With the extension installed, opening a Markdown file shows the EDTR.md preview as the default editor (View mode). A pill in the top-right corner switches between View (preview only) and Split (VS Code's native text editor beside the preview). Editing stays in VS Code's text editor and the preview live-updates as you type.

Features

• Mermaid diagrams — ```mermaid fenced blocks render as live SVG.
• Vega-Lite charts — ```vega-lite blocks render as interactive charts.
• ABC music notation — ```abc blocks render as engraved sheet music.
• KaTeX math — $inline$ and $$block$$ LaTeX.
• GitHub-style callouts — > [!NOTE], > [!TIP], > [!WARNING], > [!IMPORTANT], > [!CAUTION].
• Task lists — clicking a checkbox in the preview toggles it in the source file.
• Footnotes, ==highlight==, ~sub~, ^super^, image sizing ![](https://github.com/0xymg/edtrmd/raw/HEAD/img =400x300).
• Heading alignment — # Title {.center} / {.right}.
• Spacers & page breaks — ::: and ::pb::.
• Syntax highlighting for fenced code via highlight.js (GitHub theme).
• Live update as you type, and a theme that mirrors VS Code light/dark.

Usage

Just open any Markdown file. It opens in the EDTR.md preview (View mode) automatically. Use the pill in the top-right corner to switch modes:

• View: the preview only, full width.
• Split: opens VS Code's native text editor beside the preview. Edit on one side and watch it render on the other. Switching back to View closes that editor.

The preview updates live as you type. To edit a Markdown file as plain text instead, use the editor's "Reopen With" action and pick "Text Editor".

Notes

• Bookmark blocks (@[https://example.com]) render as a simple link in the extension (the rich link-card fetch used on edtrmd.com requires a backend).
• External links open in your default browser; in-document heading links scroll the preview.

Development

pnpm install
pnpm watch        # rebuild on change
# then press F5 in VS Code to launch an Extension Development Host
pnpm package      # produce a .vsix

License

MIT — see LICENSE.