Markdown Interactor
An interactive WYSIWYG Markdown editor for Visual Studio Code. Write Markdown with instant rendering, switch between visual and split-screen editing, and keep every change synchronized with the underlying text document.
Features
- Three editing modes — instant rendering, WYSIWYG, and split-screen source/preview.
- Live document synchronization — edits made in Markdown Interactor are reflected in the VS Code text document.
- Rich Markdown support — tables, task lists, code blocks, links, media, and Vditor Markdown extensions.
- Math and diagrams — KaTeX, Mermaid, Graphviz, ECharts, and abc.js notation. Display math accepts both
$$ ... $$ and \[ ... \] delimiters.
- Image handling — pasted, dropped, or uploaded images are saved automatically to a configurable folder.
- Writing tools — document outline, line numbers, search, table context actions, and Markdown/HTML copy commands.
- VS Code integration — light/dark theme adaptation, Explorer and editor-title context menus, keyboard shortcuts, and
Open With... support.
- Workspace themes — customize the complete editor appearance with
.vscode/markdown-interactor.css.
Installation
Install a VSIX
- Download or build the
.vsix package.
- Open the Extensions view in VS Code.
- Select Views and More Actions... → Install from VSIX....
- Choose the downloaded package.
Build from source
Requirements: Node.js 18 or later and pnpm.
git clone https://github.com/sontarakumar313-netizen/vscode-md-interactor.git
cd vscode-md-interactor
pnpm install
pnpm build
npx @vscode/vsce package
Usage
Open a .md or .markdown file using any of these methods:
- Open the Command Palette and run Markdown Interactor: Open with Markdown Interactor.
- Right-click a Markdown file in Explorer and select Open with Markdown Interactor.
- Right-click an open Markdown editor tab and select Open with Markdown Interactor.
- Select Open With... → Markdown Interactor. Use Configure Default Editor... to make it the default for Markdown files.
- Press
Ctrl+Shift+Alt+M on Windows/Linux or Cmd+Shift+Alt+M on macOS while a Markdown text editor is focused.
Use the toolbar's edit-mode button to switch between instant rendering, WYSIWYG, and split-screen modes.
Settings
| Setting |
Default |
Description |
markdown-interactor.imageSaveFolder |
assets |
Folder used for pasted, dropped, and uploaded images. Relative paths are resolved from the Markdown file. ${projectRoot}, ${file}, ${fileBasenameNoExtension}, and ${dir} are supported. |
markdown-interactor.useVscodeThemeColor |
true |
Uses the active VS Code theme background in the editor. |
Custom CSS
Markdown Interactor loads custom CSS only from .vscode/markdown-interactor.css in the workspace containing the current Markdown file. For files outside a workspace, it uses the first open workspace. Parent directories are never searched.
- Run Markdown Interactor: Generate Default Workspace CSS or copy a complete template from
00-styles/ to .vscode/markdown-interactor.css.
- Edit the generated stylesheet.
- Open the toolbar's More menu and select Reload workspace CSS.
The stylesheet is loaded when an editor panel starts and is not watched automatically. See 00-styles/README.md for available templates and selector guidance.
Development
# Compile the extension host and bundle the webview
pnpm build
# Watch both parts during development
pnpm watch
Use VS Code's Extension Development Host to test the compiled extension locally.
Acknowledgements
Markdown Interactor is based on zaaack/vscode-markdown-editor and is powered by Vditor. Thanks also to the Visual Studio Code project and its extension APIs.
Author and repository
License
MIT
