编辑器

预览

开始编写 Markdown

在左侧编辑器中输入 Markdown 内容，这里将实时显示渲染结果

行 1, 列 1 | 0 字符, 0 单词 | UTF-8

未保存 | 编辑模式

Markdown 编辑器

Markdown编辑器是现代写作和文档编辑的首选工具，支持实时预览、语法高亮和丰富的扩展功能。本工具基于CodeMirror编辑器和Marked.js解析器构建，提供专业级的编辑体验。

核心功能详解

✍️ 实时预览

双栏编辑模式，左侧编辑右侧实时预览。支持同步滚动，编辑和预览始终保持同步。兼容原始Markdown和GitHub Flavored Markdown语法。

双栏/单栏模式切换
同步滚动功能
全屏编辑模式
暗色/亮色主题切换

🎨 语法高亮

智能语法高亮显示，支持多种编程语言的代码块高亮。基于Prism.js实现专业级代码渲染。

Markdown语法高亮
10+种编程语言支持
行号显示
代码主题切换

📊 Mermaid图表

强大的图表绘制功能，支持流程图、时序图、甘特图等12种图表类型。基于Mermaid.js渲染，语法简洁易学。

支持的图表类型：
流程图 (Flowchart) 时序图 (Sequence)
甘特图 (Gantt) 类图 (Class)
状态图 (State) 饼图 (Pie)
用户旅程图 (Journey) Git图 (GitGraph)
思维导图 (Mindmap) 时间轴 (Timeline)

💾 多格式导出

强大的多格式导出功能，支持将Markdown文档导出为HTML、Markdown和PDF格式。满足网页发布、文档分享和打印归档等多种需求。

HTML导出 - 完整样式，适合网页发布
Markdown导出 - 标准格式，便于跨平台编辑
PDF导出 - 高质量打印，正式文档首选
图表渲染 - Mermaid图表自动转换
代码高亮 - 语法高亮完整保留

使用步骤

开始编写

在左侧编辑器中使用Markdown语法编写文档，可以通过工具栏快速插入常用元素

实时预览

右侧预览区域实时显示渲染结果，支持同步滚动。可切换为单栏预览模式

保存导出

点击保存按钮保存到本地存储，或导出为HTML、Markdown、PDF等格式

文档导出功能

本编辑器提供强大的多格式导出功能，支持将Markdown文档导出为HTML、Markdown和PDF格式。无论是网页发布、文档分享还是打印归档，都能满足您的需求。

支持的导出格式

📄 HTML导出

将Markdown文档转换为独立的HTML文件，适合网页发布和在线分享。导出的HTML文件包含完整的样式和脚本，可以在任何浏览器中直接打开。

完整样式：内嵌CSS样式，保持视觉一致性
代码高亮：自动包含Prism.js代码高亮样式
图表渲染：Mermaid图表自动渲染为SVG
响应式设计：自适应各种屏幕尺寸
离线可用：所有资源内嵌，无需网络连接

适用场景：
• 技术博客文章发布
• 项目文档网页化
• 邮件HTML附件
• 静态网站页面生成

📝 Markdown导出

保存为标准Markdown格式文件，保留所有原始标记和格式。适合跨平台编辑、版本控制和长期存档。

标准格式：遵循CommonMark和GFM规范
纯文本：易于版本控制和差异比较
跨平台：可在任何Markdown编辑器中打开
体积小：纯文本格式，文件极小
可编辑：保留所有编辑能力

适用场景：
• Git版本控制提交
• 跨设备文档同步
• 文档备份归档
• 多人协作编辑

📕 PDF导出（重点推荐）

将Markdown文档导出为高质量PDF文件，完美适合打印、分享和正式文档发布。基于浏览器原生打印功能实现，确保最佳渲染质量。

高质量渲染：矢量文字和图形，清晰锐利
完整样式：保留所有格式、颜色和布局
代码高亮：语法高亮完整保留
图表支持：Mermaid图表转为高清矢量图
分页优化：智能分页，避免内容截断
打印友好：优化的页边距和字体大小
可搜索：文本可选择和搜索
跨平台：在任何设备上都能正常显示

PDF导出特色功能：
• 自动目录：根据标题层级生成书签导航
• 页眉页脚：可自定义文档标题和页码
• 打印设置：支持A4/Letter等多种纸张尺寸
• 边距控制：可调整页边距以适应不同需求
• 背景选项：可选择包含或移除背景色
• 链接保留：超链接在PDF中仍可点击

PDF导出详细指南

📋 导出步骤

点击导出按钮

在工具栏中点击"导出"按钮，在下拉菜单中选择"导出 PDF"选项

预览文档

浏览器会打开打印预览窗口，可以看到文档的最终效果和分页情况

调整设置（可选）

可以调整纸张大小、页边距、页眉页脚等打印设置

保存PDF

在目标打印机中选择"另存为PDF"，点击保存即可生成PDF文件

🎯 最佳实践建议

图片优化：导出前确保图片已加载完成，避免PDF中出现空白
图表检查：Mermaid图表需等待渲染完成再导出，确保图表清晰
分页控制：使用<div style="page-break-after: always;"></div>在需要的地方强制分页
字体设置：使用标准字体（如宋体、黑体）确保跨平台兼容
颜色模式：打印时建议使用浅色主题，减少墨水消耗
链接处理：导出前检查所有链接是否有效
代码块：长代码块可能被分页截断，建议适当分割

💼 PDF应用场景

专业文档发布：
• 技术方案书和项目提案
• 产品说明书和用户手册
• 研究报告和学术论文
• 会议演讲讲义和培训材料

正式场合分享：
• 客户交付文档
• 合同协议和法律文书
• 认证文件和证明材料
• 简历和作品集

长期存档备份：
• 项目文档归档
• 知识库备份
• 个人笔记整理
• 历史记录保存

⚙️ 高级PDF设置技巧

Chrome浏览器设置：
1. 纸张大小：A4 (推荐) / Letter / Legal
2. 页边距：默认 (推荐) / 无 / 最小值 / 自定义
3. 缩放比例：100% (默认) 或根据内容调整
4. 选项设置：
✓ 背景图形（保留样式和颜色）
✓ 页眉和页脚（可选）

Firefox浏览器设置：
• 打印背景色和图像：建议勾选
• 缩放：适合页面宽度
• 页面方向：纵向（默认）

Safari浏览器设置：
• 在打印对话框中选择"另存为PDF"
• 勾选"打印背景"选项
• 调整缩放比例以适应内容

导出格式对比

特性	HTML	Markdown	PDF
文件大小	中等	最小	较大
可编辑性	有限	完全可编辑	不可编辑
打印质量	良好	需转换	最佳
跨平台兼容	优秀	优秀	完美
样式保持	完整	无样式	完整
在线查看	✓	需渲染	✓
版本控制	不适合	最适合	不适合
分享便利性	良好	中等	最佳
推荐场景	网页发布	协作编辑	正式分享

什么是 Markdown？

Markdown是一种轻量级标记语言，由John Gruber在2004年创建。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的HTML文档。Markdown的设计哲学是"易读易写"，其语法简洁直观，已成为技术文档、博客写作、README文件的标准格式。

Markdown 的核心特点

简洁易学：语法规则简单，10分钟即可掌握基础用法
纯文本：使用纯文本编辑，兼容所有文本编辑器和版本控制系统
可读性强：即使不渲染，源文件也具有良好的可读性
跨平台：支持所有主流平台和操作系统
广泛应用：GitHub、Stack Overflow、Reddit等主流平台原生支持
可扩展：支持GFM、CommonMark等扩展规范

基本语法示例

标题 (Headings)

# H1
## H2
### H3

使用 # 符号表示标题，最多支持6级标题

强调 (Emphasis)

**粗体**
*斜体*
~~删除线~~

使用星号或下划线标记文本样式

列表 (Lists)

- 无序列表
1. 有序列表
- [ ] 任务列表

支持无序、有序和任务列表

链接 (Links)

[文本](URL)
![图片](URL)

插入超链接和图片

代码 (Code)

`行内代码`
```
代码块
```

行内代码使用单反引号，代码块使用三反引号

引用 (Blockquotes)

> 这是引用
>> 嵌套引用

使用 > 符号创建引用块

表格 (Tables)

| 列1 | 列2 |
|-----|-----|
| 值1 | 值2 |

使用竖线和短横线创建表格

分隔线 (Horizontal Rule)

---
***
___

使用三个或以上的短横线、星号或下划线

应用场景

📝 技术文档

API文档、项目README、开发指南、技术规范书写

✍️ 博客写作

静态博客生成器（Jekyll、Hugo、Hexo）的内容编写

📚 电子书

使用GitBook、mdBook等工具创建电子书和在线文档

💬 协作平台

GitHub Issues、Pull Requests、Wiki页面编写

📄 笔记管理

Notion、Obsidian、Typora等笔记软件的内容格式

📊 演示文稿

使用reveal.js、Marp等工具创建技术演示

Markdown 扩展功能

GitHub Flavored Markdown (GFM)

GFM是GitHub对标准Markdown的扩展，增加了许多实用功能，已成为事实上的Markdown标准。

✅ 任务列表

创建可勾选的任务清单，适合项目管理和待办事项

语法：

- [x] 已完成任务
- [ ] 待完成任务
- [ ] 另一个任务

📋 表格增强

支持对齐方式控制和复杂表格结构

语法：

| 左对齐 | 居中 | 右对齐 |
|:-------|:----:|-------:|
| 内容1  | 内容2 | 内容3  |

🔗 自动链接

URL和邮箱地址自动转换为可点击链接

示例：
https://tools.top 自动转换为链接
user@example.com 自动转换为邮件链接

💻 代码块语法高亮

指定编程语言实现语法高亮显示

语法：

```javascript
function hello() {
  console.log("Hello!");
}
```

🚫 删除线

使用双波浪线标记删除文本

语法：~~删除的内容~~
效果：~~删除的内容~~

🔔 @提及和引用

在GitHub上可以@用户或引用Issue/PR

示例：
@username - 提及用户
#123 - 引用Issue/PR

Mermaid 图表语法

本编辑器集成了Mermaid，支持用代码绘制各种专业图表。

📊 流程图示例

代码：

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

说明：适合表示业务流程、算法逻辑

⏱️ 时序图示例

代码：

```mermaid
sequenceDiagram
    用户->>服务器: 发送请求
    服务器->>数据库: 查询数据
    数据库-->>服务器: 返回结果
    服务器-->>用户: 返回响应
```

说明：适合表示系统交互、API调用流程

📅 甘特图示例

代码：

```mermaid
gantt
    title 项目计划
    section 设计阶段
    需求分析 :a1, 2024-01-01, 7d
    UI设计   :a2, after a1, 5d
    section 开发阶段
    编码实现 :b1, after a2, 10d
    测试验证 :b2, after b1, 5d
```

说明：适合项目进度管理、任务规划

🧩 类图示例

代码：

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +bark()
    }
    Animal <|-- Dog
```

说明：适合面向对象设计、系统架构文档

🥧 饼图示例

代码：

```mermaid
pie title 市场份额
    "产品A" : 42
    "产品B" : 35
    "产品C" : 23
```

说明：适合数据占比展示、统计报告

🗺️ 思维导图示例

代码：

```mermaid
mindmap
  root((项目))
    前端
      React
      Vue
    后端
      Node.js
      Python
    数据库
      MySQL
      MongoDB
```

说明：适合知识整理、头脑风暴

Markdown 相关技术与标准

主流 Markdown 编辑器

桌面编辑器

Typora - 所见即所得Markdown编辑器
Obsidian - 知识库和笔记管理工具
MarkText - 开源Markdown编辑器
iA Writer - 专注写作的Markdown编辑器

在线编辑器

StackEdit - 功能丰富的在线Markdown编辑器
Dillinger - 云端Markdown编辑器
HackMD - 协作Markdown编辑器
markdown-it demo - Markdown渲染器演示

解析器和库

Marked.js - 快速的JavaScript解析器
markdown-it - 可扩展的Markdown解析器
Remark - 基于AST的Markdown处理器
Python-Markdown - Python解析器

静态网站生成器

Jekyll - Ruby静态网站生成器
Hugo - 超快的Go静态网站生成器
Hexo - Node.js博客框架
Gatsby - React静态网站生成器

Markdown 最佳实践

📝 格式规范

标题前后保留空行，提高可读性
列表项使用一致的符号（- 或 * 或 +）
代码块明确指定编程语言
链接使用有意义的描述文本，避免"点击这里"
表格对齐使用竖线，保持源码整洁

🏗️ 文档结构

使用清晰的标题层级（H1 > H2 > H3）
避免跳级使用标题（如H1直接跳到H3）
每个文档只使用一个H1标题
合理使用列表和引用组织内容
长文档添加目录导航

🔒 版本控制

Markdown文件适合使用Git进行版本管理
每行不超过80-100字符，便于diff比较
图片使用相对路径或专用图床
避免在Markdown中嵌入Base64图片
使用.gitignore排除生成的HTML文件

⚡ 性能优化

大型文档考虑拆分为多个文件
图片进行压缩优化
避免在单个文档中插入过多大图
使用CDN加速静态资源加载
启用懒加载优化长文档性能

常见问题与解决方案

❓ Markdown中如何插入空行？

Markdown会自动忽略多余的空行。如需强制换行，在行尾添加两个空格或使用<br>标签。要创建段落间距，保留一个空行即可。

❓ 如何在Markdown中显示特殊字符？

使用反斜杠转义特殊字符，如\*显示星号，\[显示方括号。或者使用<code>标签包裹特殊字符。对于HTML特殊字符，可使用HTML实体如<表示<。

❓ Markdown表格如何支持复杂格式？

标准Markdown表格功能有限。对于复杂表格，建议：1) 使用HTML的<table>标签；2) 使用Pandoc等工具扩展表格功能；3) 考虑改用其他格式如CSV，然后用工具转换。

❓ 如何在不同平台间保持Markdown兼容性？

遵循CommonMark标准可获得最佳兼容性。避免使用特定平台的扩展功能，或在文档中明确说明所需的Markdown解析器。使用Markdownlint等工具检查语法一致性。

Markdown 编辑器

核心功能详解

✍️ 实时预览

🎨 语法高亮

📊 Mermaid图表

💾 多格式导出

使用步骤

开始编写

实时预览

保存导出

文档导出功能

支持的导出格式

📄 HTML导出

📝 Markdown导出

📕 PDF导出（重点推荐）

PDF导出详细指南

📋 导出步骤

点击导出按钮

预览文档

调整设置（可选）

保存PDF

🎯 最佳实践建议

💼 PDF应用场景

⚙️ 高级PDF设置技巧

导出格式对比

什么是 Markdown？

Markdown 的核心特点

基本语法示例

标题 (Headings)

强调 (Emphasis)

列表 (Lists)

链接 (Links)

代码 (Code)

引用 (Blockquotes)

表格 (Tables)

分隔线 (Horizontal Rule)

应用场景

📝 技术文档

✍️ 博客写作

📚 电子书

💬 协作平台

📄 笔记管理

📊 演示文稿

Markdown 扩展功能

GitHub Flavored Markdown (GFM)

✅ 任务列表

📋 表格增强

🔗 自动链接

💻 代码块语法高亮

🚫 删除线

🔔 @提及和引用

Mermaid 图表语法

📊 流程图示例

⏱️ 时序图示例

📅 甘特图示例

🧩 类图示例

🥧 饼图示例

🗺️ 思维导图示例

Markdown 相关技术与标准

Markdown 规范标准

Original Markdown

CommonMark

GitHub Flavored Markdown

Pandoc Markdown

主流 Markdown 编辑器

桌面编辑器

在线编辑器

解析器和库

静态网站生成器

Markdown 最佳实践

📝 格式规范

🏗️ 文档结构

🔒 版本控制

⚡ 性能优化

常见问题与解决方案

❓ Markdown中如何插入空行？

❓ 如何在Markdown中显示特殊字符？

❓ Markdown表格如何支持复杂格式？

❓ 如何在不同平台间保持Markdown兼容性？

工具推荐