
一个全面的 MDX 组件测试文档,包含所有常用的 Markdown 和 MDX 功能,用于验证渲染效果是否正确。
这是一篇全面的测试文档,用于验证所有 MDX 组件的渲染效果。
这个文档包含以下测试内容:
这是 H1 标题的测试内容,包含 粗体文本 和 斜体文本,以及 行内代码 的展示。
这是 H2 标题,用于测试嵌套标题的 TOC 生成和样式。
这是 H3 标题,用于测试更深层次的标题结构。
这是 H4 标题,验证标题样式的连续性。
这是 H5 标题,测试标题的最小层级。
####### 六级标题
这是 H6 标题,Markdown 的最深标题层级。
**text** 语法*text* 语法***text*** 语法~~text~~ 语法const variable = "value"git commit -m "Initial commit"npm install --save-dev @types/node @types/react @types/react-domCtrl + S 保存文件 Cmd + C 复制内容
// 这是一个 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}`)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)
}
}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 results# 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 test- 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。
bash npm install fumadocs-ui npm run dev bash pnpm add fumadocs-ui pnpm dev bash yarn add fumadocs-ui yarn dev 创建 source.config.ts 文件并添加必要的配置:
import { defineDocs } from 'fumadocs-mdx/config'
export default defineDocs({
dir: 'content/docs',
})这里是隐藏的详细内容,可以包含任意的 HTML 和 Markdown 内容。
><这个测试文档涵盖了 MDX 的主要功能和特性。通过实际渲染,我们可以验证:
如果发现任何渲染问题,请及时调整相关的组件配置。
测试完成时间: 2025-12-18 测试环境: Next.js 15 + Fumadocs + MDX 测试状态: ✅ 通过 新增功能: Fumadocs UI 组件集成
这是脚注的内容,通常在文档底部显示。 ↩