2025-11-24 · 9 min read
MDX 组件完整测试文档
#mdx#components#markdown#test#documentation
MDX 组件完整测试
这是一篇全面的测试文档,用于验证所有 MDX 组件的渲染效果。
目录导航
这个文档包含以下测试内容:
- 标题层级测试
- 文本格式化
- 列表组件
- 代码块展示
- 表格渲染
- 引用和注释
- 链接和图片
- 数学公式(如果支持)
- 高级功能
一级标题
这是 H1 标题的测试内容,包含 粗体文本 和 斜体文本,以及 行内代码 的展示。
二级标题
这是 H2 标题,用于测试嵌套标题的 TOC 生成和样式。
三级标题
这是 H3 标题,用于测试更深层次的标题结构。
四级标题
这是 H4 标题,验证标题样式的连续性。
五级标题
这是 H5 标题,测试标题的最小层级。
####### 六级标题
这是 H6 标题,Markdown 的最深标题层级。
文本格式化测试
基本文本样式
- 粗体文本: 使用
**text**语法 - 斜体文本: 使用
*text*语法 - 粗斜体文本: 使用
***text***语法 删除线文本: 使用~~text~~语法- 下划线文本: 使用 HTML 标签
行内代码
- 普通行内代码:
const variable = "value" - 带特殊字符的代码:
git commit -m "Initial commit" - 长代码行:
npm install --save-dev @types/node @types/react @types/react-dom
键盘按键样式
Ctrl + S 保存文件 Cmd + C 复制内容
列表组件测试
无序列表
- 第一项内容
- 第二项内容
- 嵌套第一项
- 嵌套第二项
- 深度嵌套第一项
- 深度嵌套第二项
- 第三项内容
有序列表
- 第一步:准备工作
- 第二步:实施计划 2.1. 子步骤 A 2.2. 子步骤 B 2.3. 子步骤 C
- 第三步:验收测试
任务列表
- 已完成的任务
- 待完成的任务
- 另一个已完成任务
- 另一个待完成任务
代码块测试
JavaScript 代码块
javascript
// 这是一个 JavaScript 函数示例
function calculateTotal(items) {
return items.reduce((sum, item) => {
return sum + item.price * item.quantity
}, 0)
}
const cart = [
{ name: '苹果', price: 5, quantity: 3 },
{ name: '香蕉', price: 3, quantity: 5 },
]
const total = calculateTotal(cart)
console.log(`总价: ¥${total}`)TypeScript 代码块
typescript
interface Product {
id: number
name: string
price: number
category: string
inStock: boolean
}
class ProductManager {
private products: Product[] = []
addProduct(product: Product): void {
this.products.push(product)
}
findProduct(id: number): Product | undefined {
return this.products.find((p) => p.id === id)
}
getProductsByCategory(category: string): Product[] {
return this.products.filter((p) => p.category === category)
}
}Python 代码块
python
import requests
from typing import Dict, List
import json
def fetch_user_data(user_id: int) -> Dict:
"""获取用户数据"""
url = f"https://api.example.com/users/{user_id}"
try:
response = requests.get(url, timeout=10)
response.raise_for_status()
return response.json()
except requests.RequestException as e:
print(f"请求失败: {e}")
return {}
def process_users(user_ids: List[int]) -> List[Dict]:
"""批量处理用户数据"""
results = []
for user_id in user_ids:
user_data = fetch_user_data(user_id)
if user_data:
results.append(user_data)
return resultsShell 命令代码块
bash
# Git 常用命令
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/username/repo.git
git push -u origin main
# Docker 命令
docker build -t my-app:latest .
docker run -p 3000:3000 my-app:latest
docker logs -f container_id
# NPM 命令
npm install --save react react-dom
npm run dev
npm run build
npm testDiff 代码块
diff
- const oldFunction = (param) => {
+ const newFunction = (param, options = {}) => {
- return param * 2;
+ const multiplier = options.multiplier || 2;
+ return param * multiplier;
+ };表格测试
基本表格
| 功能 | 状态 | 优先级 | 负责人 |
|---|---|---|---|
| 用户登录 | ✅ 完成 | 高 | 张三 |
| 数据备份 | 🔄 进行中 | 中 | 李四 |
| 性能优化 | ⏳ 待开始 | 低 | 王五 |
复杂表格
| 项目 | Q1 目标 | Q1 实际 | Q2 目标 | Q2 实际 | 完成度 |
|---|---|---|---|---|---|
| 销售额 | 100万 | 120万 | 150万 | 140万 | 93% |
| 用户增长 | 1000 | 1500 | 2000 | 2100 | 105% |
| 客户满意度 | 85% | 88% | 90% | 87% | 97% |
表格内换行
| 项目 | 描述 |
|---|---|
| 多行文本 | 第一行内容,可以在表格中展示较长的文本;第一行内容,可以在表格中展示较长的文本第一行内容,可以在表格中展示较长的文本第一行内容,可以在表格中展示较长的文本 |
| 代码示例 | function test() { return 'Hello'; } |
引用和注释测试
基本引用
这是一个引用块的示例。引用块常用于强调重要内容或引用他人的话。
引用块可以包含多行内容,支持 粗体、斜体 等格式化。
还可以在引用块中使用
行内代码。
嵌套引用
最外层引用
内层引用
更深层的引用
回到内层引用
回到最外层引用
作者引用
Steve Jobs - Stay hungry, stay foolish.
乔布斯在斯坦福大学毕业典礼上的著名演讲
链接和图片测试
内部链接
这是一个指向 MDX 测试页面 的内部链接。
外部链接
自动链接
https://www.example.com https://github.com/username/repository
邮箱链接
联系我: scofield@example.com
分隔线和装饰
水平分隔线
上面是分隔线
下面是分隔线
脚注和注释
这里有一个脚注测试1。
HTML 元素测试
HTML 标签
这是一个使用 HTML 标签创建的自定义样式块。
详细的文本格式
点击展开详细内容
这里是隐藏的详细内容,可以包含任意的 HTML 和 Markdown 内容。
- 支持列表
- 支持代码
- 支持其他格式
特殊字符测试
数学符号
- 大于号:
> - 小于号:
< - 大于等于: ≥
- 小于等于: ≤
- 不等于: ≠
- 无限大: ∞
- 求和: ∑
- 积分: ∫
特殊字符
- 版权符号: ©
- 注册商标: ®
- 商标: ™
- 摄氏度: °C
- 华氏度: °F
性能和最佳实践
代码性能考虑
- 代码高亮: 使用语法高亮提高代码可读性
- 表格响应式: 确保表格在不同屏幕尺寸下都能正常显示
- 图片优化: 使用适当的图片格式和尺寸
- 链接检查: 定期检查外部链接的有效性
内容组织建议
- 逻辑结构: 保持内容的逻辑性和连贯性
- 标题层级: 正确使用标题层级建立文档结构
- 代码示例: 提供完整、可运行的代码示例
- 注释说明: 为复杂代码添加必要的注释说明
结论
这个测试文档涵盖了 MDX 的主要功能和特性。通过实际渲染,我们可以验证:
- ✅ 所有标题层级都能正确显示
- ✅ 文本格式化功能正常工作
- ✅ 代码块语法高亮效果良好
- ✅ 表格渲染正确且响应式
- ✅ 链接和引用功能正常
- ✅ HTML 元素能够正确嵌入
如果发现任何渲染问题,请及时调整相关的组件配置。
测试完成时间: 2025-11-24 测试环境: Next.js + Contentlayer + MDX 测试状态: ✅ 通过
Footnotes
-
这是脚注的内容,通常在文档底部显示。 ↩