Markdown编辑完全指南

一、Markdown基础知识

1.1 什么是Markdown

Markdown是一种轻量级标记语言，使用纯文本格式编写文档。

【优点】：
✓ 纯文本，兼容性好
✓ 语法简单，易学易用
✓ 专注内容，不被格式干扰
✓ 版本控制友好（Git等）

【缺点】：
✗ 格式能力有限（如颜色、字体）
✗ 不同渲染器支持程度不同
✗ 复杂排版需要借助HTML

1.2 重要提醒

⚠️ Markdown原生不支持文字颜色！

要实现颜色效果，需要：
1. 使用HTML标签（推荐）
2. 使用特定平台的扩展语法
3. 某些Markdown编辑器的私有语法

本文档会详细介绍所有可行方法。

---

二、基础语法

2.1 标题（Headings）

语法 ：使用 # 号，数量代表级别

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

效果：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

注意事项：

• # 号后面要加空格
• 最多支持6级标题
• 建议标题前后空一行

2.2 段落和换行

段落：

这是第一段。

这是第二段（中间空一行）。

效果：

这是第一段。

这是第二段（中间空一行）。

---

换行：

方法1：行末加两个空格
然后换行

方法2：使用<br>标签
这是第一行<br>这是第二行

方法3：使用<br/>标签
这是第一行<br/>这是第二行

效果：

方法1：行末加两个空格

然后换行

方法2：使用

标签

这是第一行

这是第二行

2.3 文字格式化

2.3.1 加粗（Bold）

语法 ：使用 ** 或 __ 包围

**这是加粗文字**
__这也是加粗文字__

效果：

这是加粗文字
这也是加粗文字

2.3.2 斜体（Italic）

语法 ：使用 * 或 _ 包围

*这是斜体文字*
_这也是斜体文字_

效果：

这是斜体文字
这也是斜体文字

2.3.3 加粗+斜体

语法 ：使用 *** 或 ___ 包围

***这是加粗斜体文字***
___这也是加粗斜体文字___

效果：

这是加粗斜体文字
这也是加粗斜体文字

2.3.4 删除线（Strikethrough）

语法 ：使用 ~~ 包围

~~这是删除线文字~~

效果：

这是删除线文字

2.3.5 下划线（Underline）

语法：Markdown原生不支持，需要使用HTML

<u>这是下划线文字</u>

效果：

++这是下划线文字++

2.3.6 高亮（Highlight）

语法 ：使用 == 包围（部分渲染器支持）

==这是高亮文字==

效果（如果不支持，会显示为普通文字）：

这是高亮文字

备用方案（使用HTML）：

<mark>这是高亮文字</mark>

效果：

这是高亮文字

2.3.7 上标和下标

语法：使用HTML标签

H<sub>2</sub>O（水的化学式）
X<sup>2</sup>（X的平方）

效果：

H₂O（水的化学式）

X²（X的平方）

---

三、文字颜色（重点）

3.1 核心问题

❌ Markdown原生语法不支持文字颜色！

原因：
Markdown设计理念是"内容与格式分离"
专注于文档结构，不关注视觉样式

但可以通过以下方法实现颜色：
✓ HTML标签（最通用）
✓ 平台特定语法（如某些博客平台）
✓ 内联CSS样式

3.2 方法1：HTML <font> 标签（简单但已废弃）

语法：

<font color="red">这是红色文字</font>
<font color="blue">这是蓝色文字</font>
<font color="green">这是绿色文字</font>
<font color="#FF5733">这是橙色文字（十六进制）</font>

效果：

这是红色文字
这是蓝色文字
这是绿色文字
这是橙色文字（十六进制）

注意：

• ⚠️ <font> 标签在HTML5中已废弃
• 但大部分Markdown渲染器仍支持
• 不推荐在正式项目中使用

3.3 方法2：HTML <span> 标签 + style（推荐）

语法：

<span style="color: red;">这是红色文字</span>
<span style="color: blue;">这是蓝色文字</span>
<span style="color: green;">这是绿色文字</span>
<span style="color: #FF5733;">这是橙色文字</span>

<!-- 带背景色 -->
<span style="color: white; background-color: red;">白字红底</span>
<span style="color: black; background-color: yellow;">黑字黄底</span>

<!-- 多种样式组合 -->
<span style="color: red; font-weight: bold; font-size: 20px;">红色加粗大号字</span>

效果：

这是红色文字

这是蓝色文字

这是绿色文字

这是橙色文字

白字红底

黑字黄底

红色加粗大号字

常用颜色代码：

颜色名	英文名	十六进制	RGB
红色	red	#FF0000	rgb(255, 0, 0)
绿色	green	#00FF00	rgb(0, 255, 0)
蓝色	blue	#0000FF	rgb(0, 0, 255)
黄色	yellow	#FFFF00	rgb(255, 255, 0)
橙色	orange	#FFA500	rgb(255, 165, 0)
紫色	purple	#800080	rgb(128, 0, 128)
灰色	gray	#808080	rgb(128, 128, 128)
黑色	black	#000000	rgb(0, 0, 0)
白色	white	#FFFFFF	rgb(255, 255, 255)

3.4 方法3：使用Emoji替代颜色（创意方法）

语法：

🔴 红色重要提示
🟢 绿色成功信息
🟡 黄色警告信息
🔵 蓝色普通信息
⚫ 黑色严重问题
⚪ 白色次要信息

✅ 成功
❌ 失败
⚠️ 警告
🔥 热门
⭐ 重要
💡 提示

效果：

🔴 红色重要提示

🟢 绿色成功信息

🟡 黄色警告信息

🔵 蓝色普通信息

⚫ 黑色严重问题

⚪ 白色次要信息

✅ 成功

❌ 失败

⚠️ 警告

🔥 热门

⭐ 重要

💡 提示

3.5 方法4：代码块彩色输出（特殊场景）

语法：使用diff语法高亮

​```diff
+ 这是绿色文字（添加）
- 这是红色文字（删除）
! 这是橙色文字（警告）
# 这是灰色文字（注释）
​```

效果：

+ 这是绿色文字（添加）
- 这是红色文字（删除）
! 这是橙色文字（警告）
# 这是灰色文字（注释）

---

四、列表

4.1 无序列表（Unordered List）

语法 ：使用 -、* 或 +

- 项目1
- 项目2
- 项目3
  - 子项目1（缩进2空格或1个Tab）
  - 子项目2
    - 子子项目1

* 也可以用星号
+ 也可以用加号

效果：

• 项目1
• 项目2
• 项目3
  • 子项目1
  • 子项目2
    • 子子项目1

4.2 有序列表（Ordered List）

语法 ：使用数字 + .

1. 第一项
2. 第二项
3. 第三项
   1. 子项1（缩进3空格）
   2. 子项2
4. 第四项

效果：

1. 第一项
2. 第二项
3. 第三项
   1. 子项1
   2. 子项2
4. 第四项

4.3 任务列表（Task List）

语法 ：使用 - [ ] 和 - [x]

- [ ] 未完成任务
- [x] 已完成任务
- [ ] 待办事项1
- [x] 已完成事项1
  - [ ] 子任务1
  - [x] 子任务2

效果：

• 未完成任务
• 已完成任务
• 待办事项1
• 已完成事项1
  • 子任务1
  • 子任务2

---

五、链接和图片

5.1 链接（Links）

基本语法：

[链接文字](URL)

示例：
[百度](https://www.baidu.com)
[Google](https://www.google.com)

效果：

百度
Google

带标题的链接：

[链接文字](URL "鼠标悬停显示的标题")

示例：
[百度](https://www.baidu.com "点击访问百度")

效果：

百度

引用式链接：

这是一个[链接][id]

[id]: https://www.baidu.com "百度"

效果：

这是一个链接

自动链接：

<https://www.baidu.com>
<example@email.com>

效果：

https://www.baidu.com
example@email.com

5.2 图片（Images）

基本语法：

![替代文字](图片URL)

示例：
![示例图片](https://via.placeholder.com/150)

带标题的图片：

![替代文字](图片URL "鼠标悬停显示的标题")

示例：
!\[\]失https://v败a.pla能有防盗链机制,建议将图片保存下来直接上传(https://www.baidu.com)

**使用HTML调整图片大小**：

```markdown
<img src="https://via.placeholder.com/150" width="100" height="100">
<img src="https://via.placeholder.com/150" width="50%">

---

六、代码

6.1 行内代码（Inline Code）

语法 ：使用反引号 `````

使用 `console.log()` 打印日志

效果：

使用 console.log() 打印日志

6.2 代码块（Code Block）

语法1：缩进4个空格或1个Tab

    function hello() {
        console.log("Hello World");
    }

语法2：使用三个反引号（推荐）

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

效果：

function hello() {
    console.log("Hello World");
}

6.3 语法高亮（Syntax Highlighting）

语法：在三个反引号后面加语言名称

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

```python
def hello():
    print("Hello World")
```

```java
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}
```

```sql
SELECT * FROM users WHERE id = 1;
```

```bash
echo "Hello World"
ls -la
```

```json
{
  "name": "example",
  "version": "1.0.0"
}
```

效果：

function hello() {
    console.log("Hello World");
}

def hello():
    print("Hello World")

public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}

6.4 显示代码块本身（转义）

问题：如何在Markdown中显示代码块语法本身？

解决：使用更多的反引号包围

````markdown
```javascript
console.log("hello");
```
````

---

七、表格（Tables）

7.1 基本表格

语法：

| 列1 | 列2 | 列3 |
| --- | --- | --- |
| 内容1 | 内容2 | 内容3 |
| 内容4 | 内容5 | 内容6 |

效果：

列1	列2	列3
内容1	内容2	内容3
内容4	内容5	内容6

7.2 对齐方式

语法：

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

效果：

左对齐	居中对齐	右对齐
内容1	内容2	内容3
内容4	内容5	内容6

7.3 表格中使用格式化

语法：

| 功能 | 语法 | 说明 |
| --- | --- | --- |
| **加粗** | `**文字**` | 重点强调 |
| *斜体* | `*文字*` | 一般强调 |
| `代码` | `` `代码` `` | 代码片段 |
| [链接](https://baidu.com) | `[文字](URL)` | 超链接 |

效果：

功能	语法	说明
加粗	**文字**	重点强调
斜体	*文字*	一般强调
代码	代码	代码片段
链接	[文字](URL)	超链接

7.4 表格技巧

1. 表格可以不对齐（但对齐更易读）

| 列1 | 列2 |
|---|---|
| 短 | 很长很长很长的内容 |

2. 表格中换行

| 列1 | 列2 |
| --- | --- |
| 第一行<br>第二行 | 内容 |

效果：

列1	列2
第一行 第二行	内容

3. 表格中使用颜色

| 状态 | 说明 |
| --- | --- |
| <span style="color: green;">成功</span> | 操作成功 |
| <span style="color: red;">失败</span> | 操作失败 |

效果：

状态	说明
成功	操作成功
失败	操作失败

---

八、引用（Blockquotes）

8.1 基本引用

语法 ：使用 >

> 这是一段引用文字

效果：

这是一段引用文字

8.2 多段引用

语法：

> 第一段引用
>
> 第二段引用

效果：

第一段引用

第二段引用

8.3 嵌套引用

语法：

> 第一层引用
>> 第二层引用
>>> 第三层引用

效果：

第一层引用

第二层引用

第三层引用

8.4 引用中使用其他语法

语法：

> ## 引用中的标题
>
> - 列表项1
> - 列表项2
>
> **加粗文字** 和 *斜体文字*
>
> ```javascript
> console.log("代码块");
> ```

效果：

引用中的标题

• 列表项1
• 列表项2

加粗文字 和 斜体文字

console.log("代码块");

---

九、分隔线（Horizontal Rules）

语法 ：使用三个或以上的 -、* 或 _

---

***

___

效果：

---

---

---

---

十、转义字符（Escaping）

10.1 需要转义的字符

问题：如何显示Markdown的特殊字符本身？

语法 ：使用反斜杠 \

\*这不是斜体\*
\**这不是加粗\**
\# 这不是标题
\- 这不是列表
\[这不是链接\](url)

效果：

*这不是斜体*

*这不是加粗*

这不是标题

• 这不是列表

这不是链接(url)

10.2 可转义的字符列表

字符	名称
\	反斜杠
`````	反引号
*	星号
_	下划线
{}	花括号
[]	方括号
()	圆括号
#	井号
+	加号
-	减号
.	点号
!	感叹号
`	`

---

十一、高级技巧

11.1 HTML标签（万能方法）

重要提示：

大部分Markdown渲染器支持HTML标签
可以使用HTML实现Markdown无法实现的功能

常用HTML标签：

<!-- 文字样式 -->
<span style="color: red;">红色文字</span>
<span style="font-size: 20px;">大号文字</span>
<span style="font-family: 'Courier New';">特定字体</span>

<!-- 居中 -->
<center>居中的内容</center>

<!-- 换行 -->
第一行<br>第二行

<!-- 空格 -->
使用&nbsp;&nbsp;&nbsp;&nbsp;多个空格

<!-- 折叠内容 -->
<details>
<summary>点击展开</summary>
这是折叠的内容
</details>

<!-- 键盘按键 -->
按下 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制

<!-- 高亮 -->
<mark>高亮文字</mark>

<!-- 上标下标 -->
H<sub>2</sub>O
X<sup>2</sup>

效果：

红色文字

大号文字
居中的内容

第一行

第二行

使用 多个空格
点击展开 这是折叠的内容

按下 Ctrl + C 复制

高亮文字

H₂O

X²

11.2 脚注（Footnotes）

语法：

这是一段文字[^1]，这是另一段文字[^2]。

[^1]: 这是第一个脚注的内容
[^2]: 这是第二个脚注的内容

效果（部分渲染器支持）：

这是一段文字^[1](#1)，这是另一段文字^[2](#2)。

11.3 定义列表（Definition Lists）

语法（部分渲染器支持）：

术语1
: 定义1

术语2
: 定义2-1
: 定义2-2

11.4 缩写（Abbreviations）

语法（部分渲染器支持）：

HTML是超文本标记语言

*[HTML]: Hyper Text Markup Language

11.5 数学公式（LaTeX）

行内公式：

这是行内公式 $E = mc^2$

效果（需要支持LaTeX的渲染器）：

这是行内公式 E = m c 2 E = mc^2 E=mc2

块级公式：

$$
\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

效果：

− b ± b 2 − 4 a c 2 a \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} 2a−b±b2−4ac

11.6 流程图（Mermaid）

语法：

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

效果（需要支持Mermaid的渲染器）：
是 否 开始 判断 执行 结束

11.7 序列图（Sequence Diagram）

```mermaid
sequenceDiagram
    Alice->>Bob: 你好Bob
    Bob->>Alice: 你好Alice
```

效果：
Alice Bob 你好Bob 你好Alice Alice Bob

11.8 Emoji表情

语法：

:smile: :laughing: :blush: :heart: :thumbsup:

或直接使用Unicode Emoji：
😀 😂 🥰 ❤️ 👍

效果：

😄 😆 😊 ❤️ 👍

😀 😂 🥰 ❤️ 👍

常用Emoji：

代码	效果	说明
:smile:	😀	微笑
:laughing:	😆	大笑
:heart:	❤️	爱心
:thumbsup:	👍	点赞
:fire:	🔥	火
:star:	⭐	星星
:warning:	⚠️	警告
:check:	✅	完成
:x:	❌	错误

---

十二、实用技巧总结

12.1 文字颜色完整方案

推荐方案：

<!-- 方案1：span + style（最推荐） -->
<span style="color: red;">红色文字</span>
<span style="color: red; font-weight: bold;">红色加粗</span>
<span style="color: white; background-color: red; padding: 2px 5px;">红底白字</span>

<!-- 方案2：font标签（简单但已废弃） -->
<font color="red">红色文字</font>

<!-- 方案3：使用Emoji（创意方法） -->
🔴 红色重要提示
🟢 绿色成功信息
⚠️ 警告信息

<!-- 方案4：使用引用+加粗（无颜色但有视觉区分） -->
> **重要提示**：这里是重点内容

12.2 强调文字的多种方法

<!-- 方法1：加粗 -->
**这是重点**

<!-- 方法2：高亮背景色 -->
<mark>这是高亮</mark>
<span style="background-color: yellow;">这是黄色高亮</span>

<!-- 方法3：颜色 -->
<span style="color: red;">这是红色重点</span>

<!-- 方法4：引用框 -->
> 这是引用框中的重点

<!-- 方法5：代码框 -->
`这是行内代码样式`

<!-- 方法6：表情符号 -->
⚠️ 这是警告
✅ 这是成功
❌ 这是错误
🔥 这是热门
⭐ 这是重要

<!-- 方法7：组合使用 -->
<span style="color: red; font-weight: bold; background-color: yellow;">
🔥 超级重点
</span>

效果对比：

这是重点

这是高亮

这是红色重点

这是引用框中的重点

这是行内代码样式

⚠️ 这是警告

✅ 这是成功

❌ 这是错误
🔥 超级重点

12.3 布局技巧

1. 居中对齐

<center>居中的内容</center>

<div align="center">
也是居中的内容
</div>

效果：
居中的内容
也是居中的内容

2. 两列布局

<table>
<tr>
<td width="50%">

左边的内容
- 列表1
- 列表2

</td>
<td width="50%">

右边的内容
- 列表3
- 列表4

</td>
</tr>
</table>

效果：

|---|
| |

左边的内容

• 列表1
• 列表2

右边的内容

• 列表3
• 列表4

12.4 特殊字符和符号

常用符号：

版权符号：© 或 ©
注册商标：® 或 ®
商标符号：™ 或 ™
小于号：&lt; 或 <
大于号：&gt; 或 >
与符号：&amp; 或 &
引号：&quot; 或 "
空格：&nbsp;
省略号：... 或 ...

数学符号：
≈ 约等于
≠ 不等于
≤ 小于等于
≥ 大于等于
× 乘号
÷ 除号
± 加减号
∞ 无穷大
√ 根号
∑ 求和
∏ 连乘
∫ 积分

箭头：
→ ← ↑ ↓
⇒ ⇐ ⇑ ⇓
↔ ⇔

其他：
★ ☆ ✓ ✔ ✗ ✘
♠ ♣ ♥ ♦

效果：

版权符号：© 或 ©

注册商标：® 或 ®

商标符号：™ 或 ™

≈ ≠ ≤ ≥ × ÷ ± ∞ √ ∑ ∏ ∫

→ ← ↑ ↓ ⇒ ⇐ ⇑ ⇓ ↔ ⇔

★ ☆ ✓ ✔ ✗ ✘ ♠ ♣ ♥ ♦

12.5 注释（不显示的内容）

语法：

<!-- 这是注释，不会在渲染后显示 -->

<!--
这是多行注释
第二行
第三行
-->

---

十三、不同平台的差异

13.1 GitHub Markdown

特色功能：

<!-- 任务列表 -->
- [x] 已完成
- [ ] 未完成

<!-- @提及用户 -->
@username

<!-- #引用Issue -->
#123

<!-- 提交SHA引用 -->
16c999e8c71134401a78d4d46435517b2271d6ac

<!-- Emoji -->
:smile: :+1:

<!-- 表格 -->
| 左对齐 | 居中 | 右对齐 |
| :--- | :---: | ---: |
| 内容 | 内容 | 内容 |

<!-- 语法高亮 -->
```javascript
console.log("hello");
​```

<!-- 折叠内容 -->
<details>
<summary>点击展开</summary>
内容
</details>

13.2 Typora

特色功能：

• 所见即所得编辑
• 支持数学公式（LaTeX）
• 支持流程图（Mermaid）
• 支持更多HTML标签
• 主题自定义

13.3 VS Code Markdown

推荐插件：

1. Markdown All in One
   - 快捷键支持
   - 自动补全
   - 格式化

2. Markdown Preview Enhanced
   - 增强预览
   - 支持更多扩展语法
   - 导出功能

3. markdownlint
   - 语法检查
   - 规范提示

---

十四、最佳实践

14.1 文档结构建议

# 标题（一个文档只用一个一级标题）

## 目录（可选）

- [第一章](#chapter1)
- [第二章](#chapter2)

## 第一章 {#chapter1}

### 1.1 小节

内容...

### 1.2 小节

内容...

## 第二章 {#chapter2}

### 2.1 小节

内容...

---

## 参考资料

1. [链接1](url1)
2. [链接2](url2)

14.2 代码规范

✅ 好的习惯：

1. 标题前后空行
2. 列表缩进统一（2空格或4空格）
3. 代码块指定语言
4. 表格对齐
5. 链接使用引用式（便于维护）

❌ 不好的习惯：

1. 没有空行，挤在一起
2. 缩进混乱
3. 代码块不指定语言
4. 表格不对齐
5. 链接直接内联（难维护）

14.3 性能优化

1. 图片使用外链或相对路径
2. 大型文档拆分多个文件
3. 避免过长的行（建议80-120字符换行）
4. 使用目录导航

---

十五、快速参考表

15.1 常用语法速查

效果	语法	示例
加粗	**文字**	加粗
斜体	*文字*	斜体
加粗斜体	***文字***	加粗斜体
删除线	~~文字~~	删除线
++下划线++	<u>文字</u>	++下划线++
代码	代码	代码
链接	[文字](url)	[链接](#效果 语法 示例 加粗 文字 加粗 斜体 文字 斜体 加粗斜体 文字 加粗斜体 删除线 文字 删除线 下划线 文字 下划线 代码 代码 代码 链接 文字 链接)

15.2 颜色方案速查

<!-- 红色 -->
<span style="color: red;">红色文字</span>
<font color="red">红色文字</font>

<!-- 绿色 -->
<span style="color: green;">绿色文字</span>
<font color="green">绿色文字</font>

<!-- 蓝色 -->
<span style="color: blue;">蓝色文字</span>
<font color="blue">蓝色文字</font>

<!-- 背景色 -->
<span style="background-color: yellow;">黄色背景</span>

<!-- 组合 -->
<span style="color: white; background-color: red; padding: 2px 5px; border-radius: 3px;">
白字红底
</span>

15.3 表情符号速查

类型	Emoji	用途
状态	✅ ❌ ⚠️	成功、失败、警告
重要性	🔥 ⭐ 💡	热门、重要、提示
颜色标记	🔴 🟢 🟡 🔵	红绿黄蓝
方向	⬆️ ⬇️ ➡️ ⬅️	上下左右
开发	💻 🐛 🔧 🚀	代码、Bug、工具、发布

---

十六、常见问题（FAQ）

Q1: Markdown能改变文字颜色吗？

A: Markdown原生不支持颜色，但可以通过HTML实现：

<span style="color: red;">红色文字</span>
<font color="red">红色文字</font>

Q2: 为什么我的表格/代码块/颜色不生效？

A: 可能原因：

1. 渲染器不支持该语法
2. 语法错误（如表格的|没对齐）
3. HTML标签被禁用（某些平台安全限制）

解决方案：

• 检查语法是否正确
• 尝试其他渲染器
• 使用纯Markdown语法（不用HTML）

Q3: 如何在Markdown中输入反引号本身？

A: 使用更多的反引号包围：

`` ` ``  显示一个反引号
````````显示两个反引号
```````````显示三个反引号

Q4: 如何让图片居中？

A: 使用HTML：

<center>
![图片](url)
</center>

或

<div align="center">
<img src="url" />
</div>

Q5: Markdown支持哪些图片格式？

A: 常见格式都支持：

• JPG/JPEG
• PNG
• GIF
• SVG
• WebP（部分支持）

Q6: 如何插入视频？

A: Markdown原生不支持视频，需要使用HTML或平台特定语法：

<!-- HTML5 video -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

<!-- YouTube嵌入 -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/视频ID"></iframe>

<!-- 或使用链接到视频 -->
[观看视频](video.mp4)

---

十七、工具推荐

17.1 在线编辑器

工具	链接	特点
Dillinger	https://dillinger.io	实时预览、导出多种格式
StackEdit	https://stackedit.io	功能强大、云同步
Editor.md	https://pandao.github.io/editor.md	开源、功能全面

17.2 桌面编辑器

工具	平台	特点
Typora	Win/Mac/Linux	所见即所得、界面美观
VS Code	跨平台	插件丰富、开发友好
Obsidian	跨平台	知识管理、双向链接
Mark Text	跨平台	开源、简洁

17.3 浏览器插件

• Markdown Here：在网页编辑器中使用Markdown
• Markdown Viewer：在浏览器中查看.md文件

---

---

1. 这是第一个脚注的内容 ↩︎

2. 这是第二个脚注的内容 ↩︎