md-wysiwyg
A WYSIWYG Markdown editor extension for Visual Studio Code.
Existing Markdown WYSIWYG extensions often break when combining elements such as tables, lists, and code blocks. md-wysiwyg is designed to correctly render, edit, and save these compound element combinations.
Features
Supported Markdown Syntax
| Category |
Elements |
| Inline |
Bold, Italic, Inline code, Strikethrough, Link, Image |
| Block |
Headings (h1-h6), Paragraph, Blockquote, Horizontal rule, GitHub Alerts ([!NOTE], etc.) |
| List |
Unordered, Ordered, Nested, Task list (checkbox) |
| Code block |
Fenced (```), Language specification |
| Table |
GFM pipe syntax |
Compound Element Support (Key Differentiator)
Correctly handles the following patterns that other extensions struggle with:
- Code blocks inside lists
- Code blocks inside table cells
- Nested tables (table within a table)
- Lists inside table cells
- Tables inside blockquotes
- Inline formatting inside table cells
Smart Table Output
- Simple tables are output in GFM pipe syntax for readability
- Automatically falls back to HTML
<table> when cells contain block-level elements (lists, code blocks, nested tables, etc.)
GitHub Alerts
Supports GitHub's blockquote-based alert syntax with full WYSIWYG rendering:
[!NOTE], [!TIP], [!IMPORTANT], [!WARNING], [!CAUTION]
Editing Experience
- Open the WYSIWYG editor from the Command Palette, keyboard shortcut (
Ctrl+Shift+M / Cmd+Shift+M), or the editor title bar button (when viewing a Markdown file)
- Renders in a Webview panel
- One-way sync (WYSIWYG -> source on save)
- Conflict detection: if the source file has been modified externally, you can choose to overwrite or discard
- Toolbar: Bold, Italic, Code, Strikethrough, Link, Headings, Lists, Blockquote, Alert, Table, Horizontal rule
- Markdown-like input:
# -> Heading, - -> List, ``` -> Code block, > -> Blockquote, --- -> Horizontal rule, - [ ] -> Task list
- Keyboard shortcuts:
- Basic:
Ctrl+B Bold, Ctrl+I Italic, Ctrl+S Save
- Extended:
Ctrl+Shift+X Strikethrough, Ctrl+Shift+U Link, Ctrl+Shift+C Inline code
- Extended:
Ctrl+Shift+8 Bullet list, Ctrl+Shift+7 Ordered list, Ctrl+Shift+9 Blockquote
- Extended:
Ctrl+Shift+1-6 Headings H1-H6, Ctrl+Shift+T Table, Ctrl+Shift+H Horizontal rule
- Extended:
Ctrl+Alt+Shift+C Code block
- Theme integration: Automatically matches VSCode light/dark/high-contrast themes
Usage
- Open a Markdown file
- Launch the WYSIWYG editor via one of:
- Command Palette ->
md-wysiwyg: Open WYSIWYG Editor
- Keyboard shortcut
Ctrl+Shift+M (Mac: Cmd+Shift+M)
- Editor title bar button (Markdown icon)
- Edit in the WYSIWYG editor
- Save with
Ctrl+S (changes are written back to the Markdown source)
Requirements
Known Issues
- Bidirectional real-time sync is not yet supported (one-way: WYSIWYG -> source only)
- Image drag & drop insertion is not supported
Release Notes
See CHANGELOG.md for details.
0.1.0
Initial public release. Full Markdown WYSIWYG editing with compound element support, GitHub Alerts, image display, keyboard shortcuts, and VSCode theme integration.
| |
