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. 子项1
2. 子项2
第四项

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" } ```

效果：

functionhello(){console.log("Hello World");}

defhello():print("Hello World")

publicclassHello{publicstaticvoidmain(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]: 这是第二个脚注的内容

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

这是一段文字¹，这是另一段文字²。

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^2E=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 ```

效果：

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 特殊字符和符号

常用符号：

版权符号：&copy; 或 © 注册商标：&reg; 或 ® 商标符号：&trade; 或 ™ 小于号：&lt; 或 < 大于号：&gt; 或 > 与符号：&amp; 或 & 引号：&quot; 或 " 空格：&nbsp; 省略号：&hellip; 或 … 数学符号： ≈ 约等于 ≠ 不等于 ≤ 小于等于 ≥ 大于等于 × 乘号 ÷ 除号 ± 加减号 ∞ 无穷大 √ 根号 ∑ 求和 ∏ 连乘 ∫ 积分 箭头： → ← ↑ ↓ ⇒ ⇐ ⇑ ⇓ ↔ ⇔ 其他： ★ ☆ ✓ ✔ ✗ ✘ ♠ ♣ ♥ ♦

效果：

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

→ ← ↑ ↓ ⇒ ⇐ ⇑ ⇓ ↔ ⇔

★ ☆ ✓ ✔ ✗ ✘ ♠ ♣ ♥ ♦

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: 可能原因：

渲染器不支持该语法
语法错误（如表格的|没对齐）
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	跨平台	开源、简洁