Markdown 进阶玩法：前端开发者的效率神器
Markdown 不只是写 README，它还能生成幻灯片、构建文档站点、甚至渲染交互式组件。
我以前写技术文档都是用 Word 或者飞书，格式调来调去特别累。后来接触了 Markdown，发现这东西简直是为程序员量身定做的——纯文本、Git 友好、语法简单到五分钟就能学会。现在我的博客、API 文档、项目 README、甚至技术方案评审都用 Markdown 写，效率至少提升了一倍。
最让我抓狂的是 Markdown 方言问题。GitHub Flavored Markdown 支持表格和任务列表，但标准 CommonMark 不支持。每次在不同平台写文档都要先确认「这个语法这里能不能用」，比如脚注、定义列表、数学公式，每个渲染器支持得都不一样。好在社区慢慢在收敛，现在主流工具基本都兼容 GFM 了。
1. GFM 扩展语法：你可能不知道的功能
大多数开发者只用到了标题、列表、代码块这些基础语法。但 GitHub Flavored Markdown 还有很多好用的扩展，用好了文档质量直接上一个台阶。
任务列表 + 表格 + 告警框
## 发版清单
- [x] 代码 review 通过
- [x] 单元测试覆盖率 > 80%
- [ ] 性能回归测试
- [ ] 更新 CHANGELOG
| 指标 | 优化前 | 优化后 | 提升 |
|------|--------|--------|------|
| LCP | 3.2s | 1.1s | 66% |
| INP | 280ms | 85ms | 70% |
> [!WARNING]
> 本次变更涉及数据库 migration，
> 部署前务必备份生产数据。Mermaid 流程图（GitHub 原生支持）
```mermaid
graph LR
A[用户上传图片] --> B{文件大小?}
B -- >5MB --> C[Worker 压缩]
B -- <=5MB --> D[直接处理]
C --> E[返回结果]
D --> E
```2. Markdown 驱动的文档站点
现代文档站点生成器几乎都以 Markdown 为核心。你只需要写 .md 文件，工具链负责把它变成好看的网站。目前最主流的三个方案：
VitePress
Vite 驱动，Vue 生态首选。支持在 Markdown 中直接使用 Vue 组件，构建速度极快，Vue/Vite 官方文档就是用它做的。
Docusaurus
Meta 出品，React 生态。MDX 支持让你在 Markdown 里写 JSX，版本管理和国际化开箱即用。
Starlight
Astro 生态的文档主题。框架无关，性能极致，支持多框架组件嵌入，近两年增长最快。
这三者的共同点是：文档即代码。你的文档和代码一起版本管理、一起 review、一起部署。再也不用担心文档和代码不同步的问题。
3. 用 Markdown 做技术演示
Slidev 是 Anthony Fu 开发的一个开发者演示工具，让你用 Markdown 写幻灯片。对程序员来说，再也不需要在 PowerPoint 里折腾代码高亮和动画了。
// slides.md
---
theme: seriph
---
# Web Worker 多线程编程
将耗时计算移到后台线程
---
## 为什么需要多线程？
- JS 主线程 = UI 渲染线程
- 耗时操作会阻塞 UI
- 用户感知：页面「卡死」了
---
## 代码示例
```ts {all|1-3|5-8|all}
const worker = new Worker('./worker.ts')
worker.postMessage({ data: largeArray })
worker.onmessage = (e) => {
// 主线程保持流畅
updateUI(e.data)
}
```Slidev 支持代码行高亮动画、Vue 组件嵌入、LaTeX 公式、录制和导出 PDF。如果你经常做技术分享，强烈推荐试试。
4. 前端 Markdown 渲染方案
如果你需要在自己的项目中渲染 Markdown，主流方案有两条路线：
unified 生态
remark（Markdown 解析）+ rehype（HTML 处理）的插件化管线。灵活度最高，可以自定义任何处理步骤。适合需要深度定制的场景。
markdown-it
快速、轻量的 Markdown 解析器。插件生态丰富，开箱即用，不需要理解 AST。VitePress 底层就用的它。适合「我只要渲染 Markdown」的需求。
5. 实用技巧：让 Markdown 写作更高效
Frontmatter 元数据
在文件开头用 YAML 格式添加元数据（标题、作者、日期、标签），方便工具链提取和索引。几乎所有静态站点生成器都支持 frontmatter。
代码块语言标识 + 行号高亮
始终为代码块指定语言（如 ```ts 而非 ```），这样渲染引擎才能正确高亮。VitePress 和 Shiki 还支持 {1,3-5} 语法高亮特定行。
锚点链接 + 目录生成
Markdown 的标题会自动生成锚点 ID。善用 [跳转](#section-id) 语法创建文内导航，配合工具自动生成 TOC 目录。
Git Diff 友好
每个句子独占一行（句号后换行），这样改一句话只会在 diff 里显示一行变更，而不是整段被标红。团队协作必备的写作习惯。
在线 Markdown 预览
需要快速预览 Markdown 渲染效果？OneKit 的在线工具支持实时预览、代码高亮和导出功能，适合在没有编辑器的环境下快速查看效果。所有内容本地处理，不会上传你的文档。