2026年6月29日1约 728 字3 分钟阅读
Markdown 渲染模块验收：14 类高级语法全量测试
覆盖全部 14 类自定义高级 Markdown 语法的验收测试文章，包括 Callout、Mermaid、Live Demo、数学公式、引用、折叠块、时间轴等。
1. Callout（提示框）
五种类型的提示框：
NOTE
补充说明 这是一个 NOTE 类型的提示框，天蓝色背景。
TIP
性能优化建议
使用 React.memo 包裹纯展示组件可避免不必要的重渲染。
配合 useMemo 缓存计算结果效果更佳。
WARNING
破坏性变更
从 v2.0 开始，createStore API 签名已变更，旧写法将抛出运行时错误。
DANGER
安全风险 永远不要在客户端代码中硬编码 API 密钥。
INFO
背景知识 RSC 的核心思想是将渲染拆分为服务端和客户端两个阶段。
2. Mermaid（图表）
流程图
Mermaid
时序图
Mermaid
3. Math（数学公式）
爱因斯坦质能方程 E=mc2 揭示了质量与能量的等价关系。
贝叶斯定理：
P(A∣B)=P(B)P(B∣A)⋅P(A)矩阵运算：
[acbd]×[ef]=[ae+bfce+df]4. Live Demo（交互式沙箱）
React Counter
5. Image Attributes（图片属性）
50% 宽度居中：
33% 宽度左对齐无圆角：
6. Image Gallery（宫格图）
7. Reference（结构化参考文献）
Transformer 架构由 Vaswani 等人提出 1，彻底改变了 NLP 领域。工程实现可参考官方文档 2。
8. Footnote（脚注）
React Server Components1 通过将渲染拆分到服务端来减少客户端 bundle 大小。 这一架构灵感来自 PHP 的请求处理模型2。
9. Code Group（多语言 Tab）
| 1 | import requests |
| 2 | |
| 3 | response = requests.get("https://api.example.com/data") |
| 4 | data = response.json() |
| 5 | print(data) |
10. Details（折叠块）
点击查看详细配置说明
以下是完整的配置参数说明：
- timeout: 请求超时时间（毫秒）
- retries: 重试次数
- baseUrl: API 基础路径
json
{
"timeout": 5000,
"retries": 3
}
常见问题 FAQ
A: 开启 debug 模式即可查看详细日志。
A: 支持所有现代浏览器（Chrome 90+、Firefox 88+、Safari 14+）。
11. Timeline（时间轴）
2024-01
项目启动
团队组建完成，确定技术栈和架构方案。
2024-03
第一版上线
完成核心功能开发，包括用户认证、数据管理、API 接口。
2024-06
性能优化
数据库查询优化，API 响应时间从 800ms 降至 120ms。
2024-09
国际化支持
支持中文、英文、日文三种语言。
12. 标准 Markdown 语法
表格
| 功能 | 状态 | 说明 |
|---|---|---|
| Frontmatter | ✅ | YAML 元数据 |
| Callout | ✅ | 5 种类型 |
| Mermaid | ✅ | 流程图 + 时序图 |
| Live Demo | ✅ | React + Tailwind |
| Math | ✅ | 行内 + 块级 |
列表
- 无序列表项 1
- 无序列表项 2
- 嵌套项
- 有序列表项 1
- 有序列表项 2
行内代码
使用 npm install 安装依赖，然后运行 npm run dev。
引用
这是一段引用文本。 可以有多行。
分割线
复选框
- 已完成项
- 未完成项
Footnotes
参考文献
- Attention Is All You Need提出了 Transformer 架构，奠定了现代大模型的基础。
- PyTorch Transformer 官方文档