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.

This extension is a preview/viewer. Markdown editing stays in VS Code's text editor; the extension renders the active document in a separate preview panel.

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

Open any Markdown file and run one of:

• edtr.md: Open Preview to the Side — Cmd/Ctrl + K V, or the preview icon in the editor title bar.
• edtr.md: Open Preview — Cmd/Ctrl + Shift + V.

The preview updates as you edit and stays in sync when you save.

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.