跳转至

第 3 章：团队协作文档

场景： 你加入了项目组，需要写周报、记录会议纪要、维护任务看板。团队文档需要表格、任务列表、折叠区域等更丰富的排版能力。

3.1 表格：让数据一目了然

基础表格

| 姓名 | 负责模块 | 进度 |
|:---|:---:| ---:|
| 张三 | 用户系统 | 80% |
| 李四 | 支付模块 | 60% |
| 王五 | 数据看板 | 95% |

渲染效果：

姓名 负责模块 进度
张三 用户系统 80%
李四 支付模块 60%
王五 数据看板 95%

对齐方式：

写法 效果
:--- 左对齐（默认）
:---: 居中对齐
---: 右对齐

写一份项目进度表

| 任务 | 负责人 | 优先级 | 状态 | 截止日期 |
|:---|:---|:---:|:---:|:---:|
| 用户登录 API | 张三 | 🔴 高 | ✅ 完成 | 5月10日 |
| 支付接口对接 | 李四 | 🔴 高 | 🔄 进行中 | 5月15日 |
| 数据看板 UI | 王五 | 🟡 中 | 📋 待开始 | 5月20日 |
| 单元测试 | 赵六 | 🟢 低 | 📋 待开始 | 5月25日 |

渲染效果：

任务 负责人 优先级 状态 截止日期
用户登录 API 张三 🔴 高 ✅ 完成 5月10日
支付接口对接 李四 🔴 高 🔄 进行中 5月15日
数据看板 UI 王五 🟡 中 📋 待开始 5月20日
单元测试 赵六 🟢 低 📋 待开始 5月25日

3.2 任务列表：追踪工作进度

## 本周计划

- [x] 完成用户登录模块
- [x] 修复首页加载性能问题
- [ ] 编写 API 文档
- [ ] 数据库查询优化
- [ ] 代码审查：支付模块

渲染效果：

本周计划

  • 完成用户登录模块
  • 修复首页加载性能问题
  • 编写 API 文档
  • 数据库查询优化
  • 代码审查：支付模块

在 GitHub 上，你可以直接点击复选框来切换状态——非常适合任务追踪。

3.3 脚注：补充说明不打断阅读

React 是一个用于构建用户界面的 JavaScript 库[^1]。

Vue 是一个渐进式 JavaScript 框架[^vue]。

[^1]: React 由 Facebook（现 Meta）于 2013 年开源。
[^vue]: Vue 由尤雨溪于 2014 年发布。

渲染效果： 正文中脚注标记显示为上标数字，点击可跳转到页面底部的脚注内容。脚注内容以较小字号显示。

3.4 转义字符：显示特殊符号本身

当你想显示 Markdown 的特殊符号本身（而非其标记含义）时，使用反斜杠 \ 转义：

\*这不是斜体\*

\# 这不是标题

\\ 这是反斜杠本身

\` 这不是代码

\[这不是链接\](url)

渲染效果： *这不是斜体* # 这不是标题 \ 这是反斜杠本身 ` 这不是代码

3.5 HTML 混用：突破 Markdown 的限制

Markdown 的设计目标是简洁，但有时你需要更复杂的排版。这时可以直接嵌入 HTML：

这是 Markdown 文字，<span style="color: red;">这是红色文字</span>。

<details>
<summary>点击展开详情</summary>

这里是被折叠的内容，可以包含 Markdown 语法。

- 列表项 1
- 列表项 2

</details>

<div align="center">
  <img src="logo.png" width="200" alt="Logo">
  <p><em>居中的图片和说明</em></p>
</div>

渲染效果： <span style="color: red;"> 让文字变红；<details> 创建可折叠区域，点击"点击展开详情"后显示隐藏内容；<div align="center"> 实现内容居中。

常用 HTML 场景

  • <kbd>Ctrl</kbd> + <kbd>C</kbd> → 键盘按键样式
  • <mark>高亮文字</mark> → 黄色高亮
  • <sub>下标</sub> / <sup>上标</sup> → 上下标

3.6 Emoji 与图标

:smile: :heart: :rocket: :tada: :fire: :books: :warning: :bulb:

渲染效果： 😄 ❤️ 🚀 🎉 🔥 📚 ⚠️ 💡

3.7 Mermaid 图表：在文档中画图

部分平台（如 GitHub、MkDocs）支持 Mermaid 语法绘制图表：

​```mermaid
flowchart TD
    A[用户登录] --> B{验证密码}
    B -->|正确| C[进入主页]
    B -->|错误| D[显示错误提示]
    D --> A
​```

渲染效果： 代码块被渲染为可视化的流程图，包含矩形节点、菱形判断框和箭头连线。

3.8 实战：写一份项目周报

把本章学到的技能整合起来：

# 2026 年 5 月项目周会纪要

> **时间：** 2026-05-08 14:00~15:00
> **地点：** 线上腾讯会议
> **参会人：** 张三、李四、王五

## 上周工作回顾

- [x] 完成用户登录模块开发（张三）
- [x] 修复首页加载性能问题（李四）
- [ ] 编写 API 文档 —— **延期至本周**（王五）

## 本周计划

| 负责人 | 任务 | 截止日期 |
|:---|:---|:---|
| 张三 | 支付模块对接 | 5月12日 |
| 李四 | 数据库优化 | 5月14日 |
| 王五 | API 文档 + 单元测试 | 5月15日 |

## 讨论事项

1. **技术选型讨论**：前端状态管理方案
   - 方案 A：Redux Toolkit（成熟稳定）
   - 方案 B：Zustand（轻量简洁）
   - **决议**：采用 Zustand，下周开始迁移

2. **发布计划调整**：v2.0 发布时间从 5 月 20 日推迟至 5 月 27 日

## 待办事项

- [ ] 张三：输出 Zustand 迁移方案文档
- [ ] 李四：评估数据库优化的影响范围
- [ ] 王五：本周五前完成 API 文档初稿

---

*下次会议：2026-05-15 14:00*

渲染效果： 会议信息用引用块突出显示；任务列表清晰展示完成状态；表格组织本周计划；编号列表记录讨论事项和决议。

本章回顾

你的团队文档技能已升级！回顾一下新掌握的技能：

  • 用 | 和 - 创建表格，控制列对齐
  • 用 - [ ] 和 - [x] 创建任务列表
  • 用 [^id] 添加脚注
  • 用 \ 转义特殊字符
  • 用 HTML 标签实现折叠、居中、颜色等高级排版
  • 用 emoji 短代码和 Mermaid 图表丰富文档

👉 进入第 4 章：发布你的作品 →