Markdown 在线编辑器

支持实时预览的 Markdown 编辑器，提供丰富的工具栏和快捷键

关于 Vditor 编辑器

本工具基于 Vditor 构建，这是一款由国内团队开发的开源 Markdown 编辑器，被广泛应用于思源笔记、链滴社区等知名产品，GitHub Star 超过 24k。相比其他在线编辑器，Vditor 在中文输入、排版渲染和功能完整性上表现尤为出色。

三种编辑模式

即时渲染（IR）、所见即所得（WYSIWYG）、分屏预览，随时切换，适应不同写作习惯

代码高亮

内置 highlight.js，支持 100+ 种编程语言语法高亮，并可显示行号

数学公式

集成 KaTeX，支持行内公式 $...$ 和块级公式 $$...$$

图表与流程图

支持 Mermaid 流程图、甘特图、时序图，以及 ECharts 数据图表

导入与导出

支持导入本地 .md 文件，可导出为 Markdown 或带样式的完整 HTML 文件

自动保存

内容自动保存至浏览器本地存储，关闭页面后重新打开仍可恢复上次内容

高级语法：图表与公式

以下语法均通过代码块触发，切换到分屏预览或所见即所得模式可查看渲染效果。

数学公式（KaTeX）

行内公式用单个 $ 包裹，块级公式用 $$ 包裹。

行内：$E = mc^2$

块级：
$$
\sum_{i=1}^{n} x_i = \frac{n(n+1)}{2}
$$

流程图（Mermaid）

使用 ```mermaid 代码块，支持 TD（从上到下）和 LR（从左到右）方向。

```mermaid
graph TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作]
    B -->|否| D[结束]
    C --> D
```

时序图（Mermaid）

描述对象之间的交互顺序，适合展示 API 调用流程。

```mermaid
sequenceDiagram
    用户->>服务器: 发送登录请求
    服务器->>数据库: 查询用户信息
    数据库-->>服务器: 返回用户数据
    服务器-->>用户: 返回 Token
```

甘特图（Mermaid）

项目进度管理，支持按阶段划分任务和时间区间。

```mermaid
gantt
    title 项目开发计划
    dateFormat YYYY-MM-DD
    section 第一阶段
    需求分析: 2024-01-01, 7d
    section 第二阶段
    开发实现: 2024-01-08, 14d
    测试上线: 2024-01-22, 7d
```

数据图表（ECharts）

使用 ```echarts 代码块，内容为标准 ECharts JSON 配置。

```echarts
{
  "xAxis": {
    "type": "category",
    "data": ["一月","二月","三月"]
  },
  "yAxis": { "type": "value" },
  "series": [{
    "data": [120, 200, 150],
    "type": "bar"
  }]
}
```

思维导图

使用 ```mindmap 代码块，通过缩进表示层级关系。

```mindmap
- 技术选型
  - 前端
    - Vue
    - React
  - 后端
    - .NET
    - Node.js
  - 数据库
    - MySQL
    - PostgreSQL
```

使用说明

工具栏功能

三种编辑模式：所见即所得、即时渲染、分屏预览
丰富的工具栏（标题、粗体、斜体、链接、代码块、表格等）
支持导入本地 .md / .markdown / .txt 文件
工具栏内置下载、导出 HTML、复制等功能
支持数学公式（KaTeX）、流程图、甘特图

快捷键

Ctrl + B：粗体
Ctrl + I：斜体
Ctrl + K：插入链接
Ctrl + E：插入代码块
Ctrl + U：无序列表
Ctrl + /：切换注释
Ctrl + Z：撤销