MD Studio (Markdown)
A WYSIWYG markdown editor for VS Code. Open any .md file and edit in Live, Preview, or Source mode — switch modes from the dropdown in the top bar. Everything runs locally with no network requests and no telemetry.
Screenshots
Features
Live mode — edit in place
- Headings, bold, italic, strikethrough, underline, highlight, inline code, and links are styled as you type — markdown syntax appears only when your cursor is on that element
- Unordered, ordered, and task lists render as visual bullet lists with checkable boxes
- Blockquotes and horizontal rules display styled without showing syntax
- Fenced code blocks show in a styled container with a language label — click to edit the source
- Block math (
$$...$$) renders via KaTeX; inline math ($...$) renders when your cursor leaves
- Mermaid diagrams render automatically; click the fullscreen icon for zoom and drag-to-pan
- Tables render as editable HTML — click any cell to type directly
Bold · Italic · Underline · Strikethrough · Highlight · Inline code · Link · Image · Heading ▾ · Bulleted list · Numbered list · Task list · Blockquote · Horizontal rule · Code block · Table ▾
Outline panel
An always-visible heading list sits to the left of the editor. The active heading highlights as you scroll in both Live and Preview modes. Click any heading to jump to it. Drag the divider to resize.
Paste images
Paste an image from your clipboard — the file saves to the configured attachment folder and a markdown image link is inserted at the cursor.
Preview mode
Full rendered HTML output with KaTeX math, Mermaid diagrams, and GFM tables.
Source mode
Plain CodeMirror editor with line numbers, undo/redo, find, and find-and-replace.
Find and find-and-replace
Ctrl+F opens a find bar in all modes. Ctrl+H adds a replace row in Source mode.
Supported syntax
Standard CommonMark and GitHub Flavored Markdown, plus:
| Feature |
Syntax |
| Highlight |
==text== |
| Inline math |
$E = mc^2$ |
| Block math |
$$ … $$ |
| Mermaid diagram |
```mermaid … ``` |
| Task lists |
- [x] done / - [ ] todo |
| Tables |
GFM pipe tables |
| Strikethrough |
~~text~~ |
Keyboard shortcuts
| Action |
Shortcut |
| Bold |
Ctrl+B |
| Italic |
Ctrl+I |
| Link |
Ctrl+K |
| Find |
Ctrl+F |
| Find and Replace |
Ctrl+H (Source mode) |
| Save |
Ctrl+S |
| Undo |
Ctrl+Z |
| Redo |
Ctrl+Y |
Requirements
VS Code 1.85 or later. No other tools, runtimes, or extensions required.
Installation
- Open VS Code
- Press
Ctrl+Shift+X to open the Extensions panel
- Search for MD Studio
- Click Install
After installation, any .md or .markdown file opens in MD Studio automatically. To open a file in VS Code's built-in editor instead, right-click the file and choose Open With → Text Editor.
Usage
Switching modes
Select a mode from the dropdown in the top bar: Live, Preview, or Source.
Formatting text (Live mode)
Select text, then click a button on the format toolbar or use a keyboard shortcut. To insert a link, place the cursor and press Ctrl+K — a [text](https://github.com/pchinnasamy/vscode_markdown_editor/blob/HEAD/url) snippet is inserted with the text selected. To insert a table, click the Table button and drag to choose the dimensions.
Pasting images
Copy any image (screenshot, browser image, or file) to your clipboard and paste it with Ctrl+V while the cursor is in the editor. The image file saves to the attachment folder (configurable) and a markdown link is inserted.
Extension settings
Search mdstudio in VS Code Settings (Ctrl+,) to find all options.
| Setting |
Default |
Description |
mdstudio.previewDebounceMs |
300 |
Milliseconds to wait after a keystroke before updating the editor. Lower values feel more responsive; higher values reduce CPU usage. |
mdstudio.attachmentFolder |
images |
Subfolder (relative to the markdown file) where pasted images are saved. Created automatically if it does not exist. |
mdstudio.pastedImageMaxSizeMB |
5 |
Maximum image size in MB accepted from the clipboard. Larger images are rejected with a warning. |
Roadmap
| Version |
Feature |
| v2.0 |
WYSIWYG Live mode, format toolbar, math, Mermaid, tables, paste images ✅ |
| v2.1 |
Export to HTML and PDF |
| v2.2 |
YouTube and local video embedding |
| v2.3 |
Heading font polish, orphan image cleanup |
Known issues
- Mermaid diagrams with syntax errors show a plain error message — no partial render
- The Table button always inserts a 3 × 2 grid; resize by editing the markdown in Source mode or adding/removing rows and columns in Live mode by editing the pipe characters
- Paste image requires the file to be inside an open VS Code workspace folder
Release notes
See CHANGELOG.md for the full history.
