Markdown Real Preview

A Typora-style WYSIWYG Markdown editor for VS Code — type Markdown, see it rendered instantly.

Features

• Beta — feedback welcome: enjoyerist@qq.com
• Type Markdown syntax directly in .md files — rendered instantly as rich text
• Full-screen editing — no split view, no toolbar, no window switching
• Transparent background, blends perfectly with your VS Code theme
• Supports headings / bold / italic / code blocks / blockquotes / tables / horizontal rules / links / images
• KaTeX math, Mermaid diagrams, code syntax highlighting
• Auto-syncs edits back to the .md file

Installation

Option 1: Install VSIX

1. Download MarkdownRealPreview-*.vsix from Releases
2. In VS Code: Ctrl+Shift+P → Extensions: Install from VSIX
3. Select the .vsix file
4. Reload Window

code --install-extension MarkdownRealPreview-1.0.1.vsix

Option 2: Build from source

git clone https://github.com/enjoyerist/MarkdownRealPreview.git
cd MarkdownRealPreview
npm install
npm run compile
npx vsce package --allow-missing-repository
code --install-extension MarkdownRealPreview-1.0.1.vsix

Usage

1. Open any .md file (double-click opens it by default)
2. Right-click → "Open with Markdown Real Preview"
3. Type Markdown directly in the rendered view — WYSIWYG

Or use the Command Palette (Ctrl+Shift+P) and search Open with Markdown Real Preview

Architecture

VS Code TextDocument (.md)
        ↕  postMessage (300ms debounce, newline normalization, dedup)
┌───────────────────────────────────┐
│  Webview                          │
│  ┌─────────────────────────────┐  │
│  │  Vditor (wysiwyg mode)      │  │
│  │  - contenteditable engine   │  │
│  │  - marked parser + highlight│  │
│  │  - KaTeX math               │  │
│  │  - Mermaid diagrams         │  │
│  └─────────────────────────────┘  │
└───────────────────────────────────┘

Project Structure

MarkdownRealPreview/
├── package.json              # Extension manifest
├── tsconfig.json
├── src/
│   ├── extension.ts          # Entry: registers CustomEditor + commands
│   └── MdEditorProvider.ts   # Core: Webview lifecycle + bidirectional sync
├── media/
│   ├── editor.js             # Vditor init + sync logic
│   ├── editor.css            # Transparent background + fullscreen layout
│   ├── mdmdt-dark.css        # Mdmdt dark theme
│   └── vditor/               # Vditor engine
└── out/                      # Build output

Tech Details

License

MIT

Markdown Real Preview（中文）

Typora 风格的 VS Code Markdown WYSIWYG 编辑器——输入即渲染，所见即所得。

特性

• 目前还在测试，如有问题请发邮件 enjoyerist@qq.com
• 在 .md 文件中直接输入 Markdown 语法，即时渲染为富文本
• 全屏编辑，无需左右分屏、无需工具栏、无需切换窗口
• 透明背景，完美融入你的 VS Code 主题
• 支持标题 / 加粗 / 斜体 / 代码块 / 引用 / 表格 / 分割线 / 链接 / 图片
• 支持 KaTeX 数学公式、Mermaid 图表、代码语法高亮
• 编辑内容实时同步回 .md 文件

安装

方式一：安装 VSIX

1. 下载 MarkdownRealPreview-*.vsix
2. VS Code 中按 Ctrl+Shift+P → Extensions: Install from VSIX
3. 选择 .vsix 文件
4. Reload Window

命令行：

code --install-extension MarkdownRealPreview-1.0.1.vsix

方式二：从源码构建

git clone https://github.com/enjoyerist/MarkdownRealPreview.git
cd MarkdownRealPreview
npm install
npm run compile
npx vsce package --allow-missing-repository
code --install-extension MarkdownRealPreview-1.0.1.vsix

使用方法

1. 打开任意 .md 文件（双击即可默认打开）
2. 右键 → "Open with Markdown Real Preview"
3. 直接在渲染视图中输入 Markdown，所见即所得

也可通过命令面板（Ctrl+Shift+P）搜索 Open with Markdown Real Preview

架构

VS Code TextDocument (.md)
        ↕  postMessage（300ms 防抖、换行符归一、去重）
┌───────────────────────────────────┐
│  Webview                          │
│  ┌─────────────────────────────┐  │
│  │  Vditor（wysiwyg 模式）     │  │
│  │  - contenteditable 编辑内核 │  │
│  │  - marked 解析 + 代码高亮   │  │
│  │  - KaTeX 数学公式           │  │
│  │  - Mermaid 图表             │  │
│  └─────────────────────────────┘  │
└───────────────────────────────────┘

项目结构

MarkdownRealPreview/
├── package.json              # 扩展清单
├── tsconfig.json
├── src/
│   ├── extension.ts          # 入口：注册 CustomEditor + 命令
│   └── MdEditorProvider.ts   # 核心：Webview 生命周期 + 双向同步
├── media/
│   ├── editor.js             # Vditor 初始化 + 同步逻辑
│   ├── editor.css            # 透明背景 + 全屏布局
│   ├── mdmdt-dark.css        # Mdmdt 暗色主题
│   └── vditor/               # Vditor 引擎
└── out/                      # 编译产物

技术细节

许可证

MIT