在线 Markdown 编辑器：实时预览
写博客、写文档、写 README——Markdown 是开发者的事实标准。但本地装编辑器麻烦，临时记笔记又需要工具。在线 Markdown 编辑器打开浏览器即用，实时预览效果。本文详解用法。
什么是 Markdown？
Markdown 是轻量级标记语言，用纯文本写出格式化文档：
# 一级标题
## 二级标题
**粗体** *斜体* `代码`
- 列表项 1
- 列表项 2
[链接](https://example.com)
> 引用块
特点：
- 纯文本，跨平台
- 语法简单
- 可读性强
- 可转 HTML/PDF
- Git 友好
52tool Markdown 编辑器
工具地址：Markdown 编辑器
功能
- 实时预览（左右分栏）
- GFM 语法（GitHub Flavored Markdown）
- 代码高亮（200+ 语言）
- 表格、任务列表、删除线
- 数学公式（KaTeX）
- 流程图（mermaid）
- 导出 HTML
- 工具栏（一键插入）
- 浏览器端处理，内容不外传
实战 1：基本写作
输入：
# 我的第一篇博客
## 简介
这是一篇用 **Markdown** 写的文章。
## 特性
- 简单语法
- 实时预览
- 导出 HTML
右侧实时显示渲染效果。
实战 2：代码块
def hello():
print("Hello, World!")
hello()
代码高亮显示。
实战 3：表格
| 名称 | 价格 | 库存 |
|------|------|------|
| 苹果 | 5 | 100 |
| 香蕉 | 3 | 200 |
自动渲染成 HTML 表格。
实战 4：导出
写完后点"导出 HTML"，下载完整 HTML 文件，可直接部署。
Markdown 语法速查
标题
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
段落和换行
段落之间空一行：
第一段
第二段
段落内换行：行尾两个空格或
强调
*斜体*
_斜体_
**粗体**
__粗体__
***粗斜体***
~~删除线~~
`行内代码`
列表
无序列表：
- 项目 1
- 项目 2
- 子项目 2.1
- 子项目 2.2
有序列表：
1. 第一项
2. 第二项
3. 第三项
任务列表（GFM）：
- [x] 已完成
- [ ] 未完成
- [ ] 待办
链接和图片
[链接文字](https://example.com)
[带标题](https://example.com "悬停提示")
引用式链接：
[链接][1]
[1]: https://example.com
引用
> 一级引用
>> 二级引用
>>> 三级引用
代码
行内代码：
使用 `npm install` 安装依赖
代码块（缩进式）：
4 空格缩进即为代码块
代码块（围栏式，推荐）：
const x = 1;
分隔线
---
***
___
表格
| 左对齐 | 居中 | 右对齐 |
|:------|:----:|------:|
| a | b | c |
转义字符
\* 不是粗体 \*
\# 不是标题 \#
\\ 反斜杠
GFM 扩展语法
任务列表
- [x] 已完成
- [ ] 未完成
删除线
~~删除线~~
表格
见上文。
自动链接
https://example.com 自动变链接
代码块语言
def f():
pass
支持 200+ 语言高亮。
数学公式
行内：
质能方程 $E = mc^2$
块级：
$$
\frac{n!}{k!(n-k)!} = \binom{n}{k}
$$
流程图（mermaid）
graph TD
A[开始] --> B{是否?}
B -- 是 --> C[执行]
B -- 否 --> D[结束]
C --> D
脚注
这是一个脚注[^1]
[^1]: 脚注内容
定义列表
术语
: 定义
锚点
[跳到段落](#段落)
## 段落
实战场景
场景 1：写博客
---
title: 我的第一篇博客
date: 2026-08-02
---
# 我的第一篇博客
## 前言
今天开始写博客...
## 正文
### 第一部分
详细内容...
用 52tool Markdown 编辑器 写作，导出 HTML 部署到博客系统。
场景 2：写 README
GitHub README.md 是项目的门面：
# 项目名称
一行简介
## 安装
npm install my-project
## 使用
import myProject from 'my-project';
myProject.run();
## API
### run()
执行任务
| 参数 | 类型 | 说明 |
|------|------|------|
| ... | ... | ... |
## License
MIT
场景 3：写技术文档
# API 文档
## 用户接口
### 创建用户
POST /api/users
**请求体**：
{
"name": "John",
"email": "john@example.com"
}
**响应**：
{
"id": 123,
"name": "John"
}
**错误码**：
| 状态码 | 含义 |
|--------|------|
| 400 | 参数错误 |
| 409 | 邮箱已存在 |
场景 4：会议纪要
# 周会纪要 2026-08-02
## 参会人员
- 张三
- 李四
- 王五
## 议题
### 上周进度
- [x] 完成登录模块
- [ ] 优化首页性能
- [ ] 修复 Bug #123
### 本周计划
1. 完成性能优化
2. 上线新功能
3. Code Review
## 行动项
- [ ] @张三 周三前提交性能报告
- [ ] @李四 周五前完成测试
场景 5：笔记整理
# 学习笔记 - React Hooks
## useState
const [count, setCount] = useState(0);
## useEffect
useEffect(() => {
document.title = You clicked ${count} times;
}, [count]);
## 注意事项
> Hooks 只能在函数组件顶层调用
## 参考
- [官方文档](https://reactjs.org/docs/hooks-intro.html)
- [RFC](https://github.com/reactjs/rfcs/blob/main/text/0168-react-hooks.md)
与其他工具配合
Markdown + 思维导图
工具：在线思维导图
把 Markdown 大纲转成思维导图，可视化结构。
Markdown + HTML 转换
写完后导出 HTML 部署。
Markdown + PDF
写完后浏览器打印为 PDF，或用 PDF 工具 处理。
Markdown + JSON
工具：JSON 格式化
文章中嵌入 JSON 代码块，格式化后粘贴。
进阶技巧
技巧 1：用 TOC 自动生成目录
## 目录
- [简介](#简介)
- [安装](#安装)
- [使用](#使用)
- [基本用法](#基本用法)
- [高级用法](#高级用法)
## 简介
...
技巧 2：用 HTML 嵌入特殊内容
<details>
<summary>点击展开</summary>
隐藏的内容
</details>
技巧 3：用 emoji
:smile: :heart: :+1:
渲染：😄 ❤️ 👍
技巧 4：注释
<!-- 这是 HTML 注释，渲染时不显示 -->
技巧 5：对齐图片
<img src="logo.png" alt="Logo" align="right" width="100">
文字会环绕在图片左侧...
常见错误
错误 1：列表嵌套缩进
- 项目 1
- 项目 2
- 子项目 ← 必须 2 空格或 4 空格缩进
错误 2：代码块围栏
code
错误 3：表格格式
| 列 1 | 列 2 |
| --- | --- | ← 分隔行必须有
| a | b |
错误 4：图片路径
 ← 相对路径
 ← 明确相对路径
 ← 绝对路径（网站根）
错误 5：特殊字符
< 不是 HTML 标签需要转义：<
& 符号：&
常见问题解答
Q: Markdown 中的换行怎么处理？
A: 段落之间空一行。段落内换行：行尾两个空格 + 回车，或用
Q: 为什么代码块不显示行号？
A: 标准 Markdown 不显示行号。52tool 编辑器在代码块上方显示语言名和复制按钮。
Q: Markdown 能嵌入视频吗？
A: 标准语法不支持。用 HTML：。或嵌入 YouTube/Bilibili 的 iframe。
Q: Markdown 转 PDF 怎么保留样式？
A: 浏览器打印为 PDF 时选择"背景图形"。或用工具如 pandoc 转 PDF（含 LaTeX）。
Q: GitHub README 表格太宽怎么办？
A: 简化列、缩短文本、用
Q: 工具会保存我的内容吗？
A: 52tool Markdown 编辑器在浏览器端运行，内容不上传服务器。刷新页面会丢失，记得保存或导出。
总结
在线 Markdown 编辑器是写作神器：
- 实时预览 → 52tool Markdown 编辑器
- 思维导图 → 思维导图工具
- 导出 HTML → 编辑器内置
- 思维导图 → 在线思维导图
记住：Markdown 是开发者必备技能，比 Word 更轻量、比纯文本更结构化。
