第 10 章：扩展语法
Markdown 的能力不止于文本排版。数学公式、流程图、表情符号——掌握这些扩展语法，你的文档将跃升到全新高度。
学习目标
- 掌握 LaTeX 数学公式的基本写法
- 熟练使用 Mermaid 绘制流程图、时序图、甘特图等
- 学会插入 Emoji 表情符号
- 理解各扩展语法的兼容性边界
10.1 数学公式（LaTeX）
Markdown 中嵌入数学公式使用 LaTeX 语法，这是学术界和工程界的数学排版标准。
行内公式
用单个 $ 包裹：
markdown
勾股定理：$a^2 + b^2 = c^2$
欧拉公式：$e^{i\pi} + 1 = 0$渲染：勾股定理：
；欧拉公式：
块级公式
用两个 $$ 包裹，公式独占一行并居中：
markdown
$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$
$$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$渲染：
常用 LaTeX 公式速查
| 类别 | 示例 | LaTeX 代码 |
|---|---|---|
| 上标 | x^2 | |
| 下标 | x_i | |
| 上下标 | x_{i+1}^2 | |
| 分数 | \frac{a}{b} | |
| 根号 | \sqrt{x} | |
| n 次根 | \sqrt[n]{x} | |
| 求和 | \sum_{i=0}^n | |
| 积分 | \int_a^b | |
| 极限 | \lim_{x \to \infty} | |
| 希腊字母 | \alpha \beta \gamma | |
| 乘号 | \times | |
| 点乘 | \cdot | |
| 约等于 | \approx | |
| 无穷 | \infty | |
| 箭头 | \rightarrow \leftarrow | |
| 括号 | \left( \frac{a}{b} \right) | |
| 矩阵 | \begin{matrix} a & b \\\ c & d \end{matrix} |
⚠️ 兼容性提示：GitHub 从 2022 年 5 月开始原生支持 LaTeX 数学公式渲染。在这之前需要依赖 MathJax 等外部库。
公式中的特殊字符
美元符号 $ 是公式的边界标记，如果公式本身包含 $，需要格外注意转义。更具体地说，在行内公式中不能直接写 $，在块级公式（$$）中才可以安全使用。
10.2 Mermaid 图表
Mermaid 是一种「用文本画图」的语言，可以用简洁的语法绘制流程图、时序图、甘特图等多种图表。GitHub 原生支持 Mermaid 渲染。
基本用法
markdown
```mermaid
图表类型
图表定义...
```10.2.1 流程图（Flowchart）
markdown
```mermaid
graph TD
A[开始] --> B{判断条件}
B -->|是| C[执行操作 A]
B -->|否| D[执行操作 B]
C --> E[结束]
D --> E
```渲染效果：
流程图语法要点
| 符号 | 含义 | 示例 |
|---|---|---|
graph TD | 从上到下的流程图 | Top-Down |
graph LR | 从左到右的流程图 | Left-Right |
A --> B | 箭头连接 | A 指向 B |
| `A --> | 文字 | B` |
A[方框] | 矩形节点 | 处理步骤 |
A{菱形} | 菱形节点 | 判断条件 |
A((圆形)) | 圆形节点 | 开始/结束 |
A[(圆柱)] | 数据库节点 | 数据存储 |
10.2.2 时序图（Sequence Diagram）
markdown
```mermaid
sequenceDiagram
participant 用户
participant 前端
participant 后端
participant 数据库
用户->>前端: 点击登录
前端->>后端: POST /api/login
后端->>数据库: 查询用户信息
数据库-->>后端: 返回用户数据
后端-->>前端: 返回 token
前端-->>用户: 登录成功
```渲染效果：
时序图语法要点
| 符号 | 含义 |
|---|---|
->> | 实线箭头 |
-->> | 虚线箭头 |
->>+ / -->>- | 激活/停用生命线 |
Note right of A | 在 A 右侧添加注释 |
Note over A,B | 覆盖 A 和 B 的注释 |
10.2.3 甘特图（Gantt Chart）
markdown
```mermaid
gantt
title 项目开发计划
dateFormat YYYY-MM-DD
section 设计阶段
需求分析 :done, des1, 2024-01-01, 7d
原型设计 :active, des2, 2024-01-08, 5d
section 开发阶段
前端开发 : dev1, 2024-01-15, 14d
后端开发 : dev2, 2024-01-15, 14d
section 测试阶段
集成测试 : test1, 2024-01-29, 7d
上线部署 : test2, 2024-02-05, 3d
```10.2.4 类图（Class Diagram）
markdown
```mermaid
classDiagram
class User {
+String name
+String email
+login()
+logout()
}
class Order {
+int id
+float amount
+create()
+cancel()
}
User "1" --> "*" Order : 拥有
```10.2.5 饼图（Pie Chart）
markdown
```mermaid
pie title 编程语言使用占比
"JavaScript" : 40
"Python" : 30
"Java" : 15
"Go" : 10
"其他" : 5
```
10.3 表情符号（Emoji）
方式一：直接输入
现代操作系统和编辑器都支持直接输入 Emoji：
markdown
今天心情很好！🎉
项目状态：✅ 完成Windows: Win + . 打开 Emoji 面板 macOS: Control + Command + Space
方式二：短代码（推荐用于 GitHub）
GitHub 支持用 :code: 形式的短代码插入 Emoji：
markdown
:tada: 项目已发布！ :rocket:
:white_check_mark: 测试全部通过
:warning: 请注意这是一个实验性功能渲染：🎉 项目已发布！ 🚀 ✅ 测试全部通过 ⚠️ 请注意这是一个实验性功能
常用 Emoji 短代码
| 短代码 | 表情 | 用途 |
|---|---|---|
:tada: | 🎉 | 庆祝、发布 |
:rocket: | 🚀 | 部署、上线 |
:warning: | ⚠️ | 警告 |
:bulb: | 💡 | 提示、技巧 |
:memo: | 📝 | 笔记、备忘 |
:bug: | 🐛 | Bug 报告 |
:sparkles: | ✨ | 新功能 |
:wrench: | 🔧 | 修复、配置 |
:white_check_mark: | ✅ | 完成、通过 |
:x: | ❌ | 错误、不通过 |
:book: | 📖 | 文档 |
:link: | 🔗 | 链接 |
:star: | ⭐ | 收藏、重要 |
:fire: | 🔥 | 热门、紧急 |
10.4 兼容性总览
| 扩展语法 | GitHub | Typora | Obsidian | VS Code | Notion |
|---|---|---|---|---|---|
| LaTeX 公式 | ✅ | ✅ | ✅ | 需插件 | ✅ |
| Mermaid 图表 | ✅ | ✅ | ❌ | 需插件 | ❌ |
| Emoji 短代码 | ✅ | ✅ | ❌ | ✅ | ❌ |
| Emoji 直接输入 | ✅ | ✅ | ✅ | ✅ | ✅ |
10.5 语法速查
| 语法 | 写法 | 说明 |
|---|---|---|
| 行内公式 | $a^2 + b^2 = c^2$ | 单 $ 包裹 |
| 块级公式 | $$...$$ | 双 $ 包裹，居中 |
| Mermaid 图表 | ```mermaid 代码块 | GitHub 原生支持 |
| Emoji 短代码 | :tada: | 适合 GitHub |
| Emoji 直接输入 | 🎉 | 通用，推荐日常使用 |
本章小结
| 要点 | 说明 |
|---|---|
| 数学公式 | LaTeX 语法，$ 行内，$$ 块级 |
| 流程图 | Mermaid graph TD/LR，矩形 / 菱形 / 圆形节点 |
| 时序图 | Mermaid sequenceDiagram，展示系统交互 |
| 甘特图 | Mermaid gantt，项目管理利器 |
| Emoji | 直接输入或 :code: 短代码 |
下一章预告
扩展语法让 Markdown 如虎添翼。但如果内置语法还不够用呢？下一章学习在 Markdown 中嵌入 HTML，释放全部排版能力。