Markdown 在线编辑器
关于 Markdown 在线编辑器
平时写点学习笔记，或者只想练练 Markdown 语法，为了这点事去专门装个软件，多少有点折腾。其实 Markdown 并不难，对初学者来说，最关键的是能 “边写边看效果”。
这时候，直接使用咱们绿叶网的 Markdown 在线编辑器就省事多了。打开网页就能写，写完立刻出排版。
Markdown 在线编辑器怎么用？
页面上方就是咱们的 Markdown 在线编辑器。它和在线编译器不太一样：Markdown 不需要 “编译后运行程序”，重点是把纯文本语法解析成排版后的内容，方便我们直接对照源码和最终效果。
- 编写内容：在编辑区输入或粘贴 Markdown 文本。
- 查看预览：观察标题、列表、引用、代码等内容的排版效果。
- 检查语法：如果某个符号没有按预期生效，可以回到编辑区检查空格、反引号、井号等写法。
- 继续修改：根据预览结果调整文本，直到结构和排版符合预期。
比如，我们可以直接把下面这段包含标题、粗体、列表和引用的文本，丢到编辑器里试试：
# Markdown 学习笔记
Markdown 适合用来写**结构清晰**的纯文本文档。
- 标题
- 列表
- 链接
- 代码
> 先把内容写清楚，再让语法负责排版。
`print('Hello, Markdown!')`效果如下图所示。
把代码放进编辑器后，标题有多大、列表怎么缩进、引用长啥样，立刻一目了然。相比于死记硬背那些语法符号，这种 “所见即所得” 的练习方式，能让你上手快得多。
Markdown 在线编辑器适合哪些场景？
Markdown 在线编辑器最适合那种 “随手写点东西，想立刻看排版效果” 的场景。比如下面几种场景：
- Markdown 入门练习：刚开始学习标题、段落、列表、链接和代码块时，可以写一点看一点，很快就能熟悉基本语法。
- 文档排版预览：临时写说明文档、学习笔记或技术内容时，可以先检查结构是否清晰，再把文本放到目标平台。
- 语法快速测试：记不清引用、参考式链接、表格或转义字符怎么写时，可以用一个小例子直接验证。
- 代码与文本混排：技术文档经常同时出现普通文字、行内代码和代码块，在线预览能更方便地检查它们是否区分清楚。
- 课堂教学与演示：老师演示 Markdown 语法时，可以一边修改源码，一边观察预览结果，学习过程更直观。
不过要稍微提醒一下，各个平台对 Markdown 的支持可能会有细微差异（比如某些特殊的表格或扩展语法）。小伙伴们在这里写好的内容，发到最终平台前，最好还是顺眼检查一下。
Markdown 是什么？
简单来说，Markdown 就是一种 “用纯文本搞定排版” 的标记语言。
平时我们使用 Word 写文章时，写着写着经常得停下来，拿起鼠标去点 “标题”、“加粗”、“列表” 这些按钮。而使用 Markdown，我们只需要在文字旁边加几个简单的符号（比如用 # 表示标题，用 - 表示列表），就能直接把版排好。
不过需要清楚的是，Markdown 不是像 Python、Java 那样用来跑程序的编程语言，它的任务就是把纯文本转换成好看的网页排版（HTML）。就算不转换，原文本看着也很清爽。
因为双手不需要离开键盘就能搞定所有排版，写起来一气呵成，所以对于经常做笔记、写技术文档的人来说，这东西一旦用熟了，就真的回不去了。
Markdown 语法速查
接下来，我们列举了 Markdown 常用的语法，以方便小伙伴们快速查阅和参考。
1. 标题
在 Markdown 中，标题是通过在文本前面添加一个或多个 “#” 来创建的。标题的级别是由 “#” 的数量决定的。
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题2. 段落
在 Markdown 中，段落不需要借助任何符号，而是通过添加空行来实现的。
第一段文本
第二段文本
第三段文本3. 文本
在 Markdown 中，与文本样式相关的语法主要有 3 种，如下表所示。
| 样式 | 语法 |
|---|---|
| 粗体 | ** 文本 ** 或 __ 本文 __ |
| 斜体 | * 文本 * 或 _ 文本 _ |
| 高亮（部分解释器支持） | == 文本 == |
4. 注释
Markdown 官方并没有提供注释语法，但由于 Markdown 代码最终会转换为 HTML 代码，因此我们可以使用 “HTML 注释” 的语法来实现注释。
其中，注释的内容可以是一行，也可以是多行。
<!--注释内容-->
<!--
注释内容
注释内容
注释内容
-->5. 引用
在 Markdown 中，我们可以在文本的前面使用 “>” 符号来表示这是一个引用块。其中，引用可以嵌套，每一级引用前都要加一个 “>”。
> 这是引用的内容
>> 这是嵌套引用的内容6. 代码
在 Markdown 中，我们可以使用反引号（`）包裹来显示行内代码。
`代码内容`如果想要插入 “代码块”，我们可以使用三反引号（```）包裹来显示。
```语言
代码内容
```7. 分割线
Markdown 提供了以下 3 种方式来插入一条分割线。
- 三个或更多的星号（*）。
- 三个或更多的连字符（-）。
- 三个或更多的下划线（_）。
***
---
___8. 链接
在 Markdown 中，链接（超链接）的创建有 2 种主要方式：行内式和参考式。
<!--行内式链接-->
[链接文本](链接地址 "链接标题")
<!--参考式链接-->
[链接文本][链接标记]
[链接标记]: 链接地址 "链接标题"9. 图片
在 Markdown 中，可以通过以下语法来插入各种格式的图像（包括 JPG、PNG、GIF 等）。
10. 列表
在 Markdown 中，无序列表使用 “*”、“+”、“-” 这 3 种标记符来表示。
<!--方式1-->
* 列表项1
* 列表项2
* 列表项3
<!--方式2-->
+ 列表项1
+ 列表项2
+ 列表项3
<!--方式3-->
- 列表项1
- 列表项2
- 列表项3在 Markdown 中，有序列表使用 “数字 + 点号” 来表示。其中，数字代表顺序。
1. 有序列表项
2. 有序列表项
3. 有序列表项11. 表格
在 Markdown 中，表格由 “行” 和 “列” 组成，我们可以先使用中划线（-）来创建分隔行，然后再使用竖线（|）分隔单元格。
| 列1标题 | 列2标题 | 列3标题 |
| -------- | -------- | -------- |
| 单元格1 | 单元格2 | 单元格3 |
| 单元格4 | 单元格5 | 单元格6 |12. 转义字符
在 Markdown 中，我们可以在特殊字符前面加上 “\（反斜杠）” 来对它们进行转义。此时 Markdown 解释器会将这些特殊字符视为普通字符，而不是按照它们的 Markdown 语法含义进行解析。
\特殊字符其中，Markdown 常见需要转义的字符如下表所示。
| 字符 | 说明 |
|---|---|
| # | 用于标题 |
| * | 用于无序列表和强调 |
| > | 用于块引用 |
| [] | 用于链接和图片 |
| () | 用于链接和图片 |
| `（反引号） | 用于代码 |
| -（中划线） | 用于无序列表和分割线 |
| _（下划线） | 用于强调 |
| .（句号） | 用于有序列表 |
| + | 用于无序列表 |
| ! | 用于图片 |
Markdown 和 HTML 有什么关系？
简单来说：Markdown 是用来 “快速写内容” 的，语法非常简洁。而 HTML 是用来 “搭建网页结构” 的，更复杂也更精细。
在绝大多数网站中，我们写的 Markdown 代码最终都会被 “翻译” 成 HTML，然后浏览器才能把它漂漂亮亮地显示出来。
虽然很多 Markdown 编辑器允许你在里面直接混写 HTML 代码（比如用 HTML 标签来改个字体颜色），但对初学者来说，能用 Markdown 语法解决的，就尽量别去写 HTML。毕竟，咱们用 Markdown 就是图它清爽省事，混写太多反而失去了初衷。
为什么同一段 Markdown 在不同编辑器里效果不一样？
新手小伙伴经常会纳闷： “明明代码一模一样，为什么在这个网站看着挺好，换个地方表格或代码高亮就乱了？”
原因很简单：各个平台用的 “翻译官”（解析器）不一样。
像标题、加粗、列表这些最基础的语法，可以说是全网通用；但像表格、待办清单、特殊高亮这些 “扩展语法”，各个平台支持的力度就千差万别了。
所以，用在线编辑器练手和快速预览非常方便，但如果你最终要把文章发布到某个具体的博客或社区，发布前最好在目标平台再预览一眼。这样能有效避免 “在这看着好好的、发出去却翻车了” 的小尴尬。
Markdown 相关教程
如果小伙伴们想要系统学习 Markdown，可以查看我们的：Markdown 教程。该教程轻松简单，大家花一个小时左右就能彻底掌握了！