MTyper Markdown Editor
MTyper Markdown Editor brings a Typora-style WYSIWYG Markdown editing experience to Visual Studio Code.
Open Markdown files as visual documents, edit content directly in the rendered page, and keep the underlying .md source synchronized with VS Code.
Preview
Features
- Visual WYSIWYG editing for
.md and .markdown files.
- Live synchronization back to the VS Code text document.
- Support for headings, paragraphs, blockquotes, ordered lists, unordered lists, task lists, code blocks, links, images, and tables.
- Inline math and math blocks powered by MathJax.
- Mermaid diagram rendering inside Markdown code fences.
- Relative local image support, including SVG images next to the Markdown file.
- Automatic theme adaptation for VS Code light, dark, and high contrast themes.
- Opens as a VS Code custom editor, so you can switch between the standard text editor and MTyper when needed.
Usage
- Open a
.md or .markdown file.
- Right-click the editor tab or the file in Explorer.
- Select Open with MTyper Markdown Editor.
You can also use VS Code's Open With... menu and choose MTyper Markdown Editor.
Editing Markdown
Click directly in the document to edit text visually. Markdown syntax such as links, images, tables, math, and diagrams is rendered for reading, while editable source syntax appears when the corresponding element enters editing mode.
Use normal VS Code save actions to write changes back to disk:
- macOS:
Cmd+S
- Windows/Linux:
Ctrl+S
- Menu: File > Save
Images
Relative images are resolved from the current Markdown file's folder. For example:
If arch-network.svg is next to the Markdown file, it will be displayed in the editor.
Diagrams
Mermaid code fences are rendered automatically:
```mermaid
graph TD
A[Start] --> B[Done]
```
Requirements
VS Code 1.85.0 or newer.
Privacy
MTyper Markdown Editor edits local Markdown documents inside VS Code. It does not send document content to external services.
Links
