Markdown Editor

Introduction

A lightweight VS Code extension for instant Markdown editing and rendering using Vditor.

Supported file formats:

• Markdown: .md

Features

• Instant Rendering: Real-time preview as you type
• WYSIWYG Editor: Visual editing with Vditor
• Markdown Support: Full CommonMark and GFM support
• Code Highlighting: Syntax highlighting with highlight.js
• Math Support: KaTeX for mathematical expressions
• Mermaid Diagrams: Support for Mermaid diagram syntax
• Outline View: Navigate document structure
• Theme Support: Multiple editor themes

Keyboard Shortcuts

Based on Vditor shortcuts:

• Move list up: Ctrl+Alt+I / ⌘+^+I
• Move list down: Ctrl+Alt+J / ⌘+^+J
• Edit in VS Code: Ctrl+Alt+E / ⌘+^+E

Tips

• Resize editor via Ctrl/Cmd + Mouse Scroll
• Open hyperlinks with Ctrl/Cmd + Click or double-click
• Paste images directly into the editor

Configuration

To use the default VS Code markdown editor instead:

{
    "workbench.editorAssociations": {
        "*.md": "default",
        "*.markdown": "default"
    }
}

Credits

• Markdown Editor: Vanessa219/vditor
• Syntax Highlighting: highlight.js
• Math Rendering: KaTeX
• Diagrams: Mermaid

TODO

markdown-editor/
├── .vscode/                  # VS Code dev configs (launch.json, tasks.json)
│   ├── launch.json           # Debug config (F5 → Extension Dev Host)
│   └── tasks.json            # Optional build/watch tasks
├── images/                   # Extension logo + screenshots
│   ├── logo.png              # Marketplace icon (128x128)
│   └── screenshot1.png       # Optional Marketplace screenshot
├── src/                      # Source code
│   ├── common/               # Shared helpers (logging, config, utils)
│   ├── mdeditor/             # Markdown editor feature
│   │   ├── provider.ts       # Creates Webview panel, lifecycle mgmt
│   │   ├── services.ts       # Markdown parsing, save/load, messaging
│   │   └── main.ts           # Generates HTML shell (template)
│   └── extension.ts          # Entry point, registers commands
├── out/                      # Compiled JS output (generated by tsc)
│   └── extension.js
├── package.json              # Extension manifest (commands, menus, config, deps)
├── tsconfig.json             # TypeScript compiler config
├── README.md                 # Marketplace description + usage guide
├── CHANGELOG.md              # Version history
└── LICENSE                   # License file (MIT, Apache, etc.)