VS Code Extensions
WYSIWYG Markdown

WYSIWYG Markdown

by masaya

A graphical WYSIWYG Markdown editor for VS Code with live text sync, theme support, tables, KaTeX math, Mermaid diagrams, and web compatibility.

Downloads

268

Rating

— (0)

Version

0.2.3

Last updated

Apr 09, 2026

A modern, powerful, and graphical Markdown editor for Visual Studio Code, powered by Vditor.

VS Code Marketplace Installs

Features

  • Graphical Editing: Full WYSIWYG (What You See Is What You Get) experience. Edit your Markdown visually without needing to know the syntax.
  • Bi-directional Sync: Edits made in the WYSIWYG pane are instantly synced to the text document, and vice versa.
  • Theme Adaptation: Automatically matches your VS Code theme (Light/Dark).
  • Web Support: Fully compatible with VS Code for the Web (vscode.dev, github.dev).
  • Rich Markdown Support: Powered by Vditor, supporting tables, math formulas (KaTeX), diagrams (Mermaid), and more.

Usage

  1. Open any Markdown file (.md).
  2. Right-click the file tab or the file in the Explorer sidebar.
  3. Select "Open With...".
  4. Choose "Vditor Markdown Editor".

Development

This extension is built with TypeScript and esbuild.

Getting Started

  1. Clone the repository.

  2. Install dependencies:

    bun install

  3. Compile the extension:

    bun run compile-web

  4. Run tests:

    bun run test

Debugging

  • Press F5 in VS Code to start a new Extension Development Host window.
  • Or run bun run run-in-browser to test in a browser-based environment.

Extension Settings

This extension currently does not contribute any settings.

Known Issues

  • Large files might experience a slight delay during initial synchronization.

License

MIT