2025-11-24 · 9 min read

MDX 组件完整测试文档

#mdx#components#markdown#test#documentation

MDX 组件完整测试

这是一篇全面的测试文档,用于验证所有 MDX 组件的渲染效果。

目录导航

这个文档包含以下测试内容:

  1. 标题层级测试
  2. 文本格式化
  3. 列表组件
  4. 代码块展示
  5. 表格渲染
  6. 引用和注释
  7. 链接和图片
  8. 数学公式(如果支持)
  9. 高级功能

一级标题

这是 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 复制内容

列表组件测试

无序列表

  • 第一项内容
  • 第二项内容
    • 嵌套第一项
    • 嵌套第二项
      • 深度嵌套第一项
      • 深度嵌套第二项
  • 第三项内容

有序列表

  1. 第一步:准备工作
  2. 第二步:实施计划 2.1. 子步骤 A 2.2. 子步骤 B 2.3. 子步骤 C
  3. 第三步:验收测试

任务列表

  • 已完成的任务
  • 待完成的任务
  • 另一个已完成任务
  • 另一个待完成任务

代码块测试

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 results

Shell 命令代码块

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 test

Diff 代码块

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%
用户增长1000150020002100105%
客户满意度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

性能和最佳实践

代码性能考虑

  1. 代码高亮: 使用语法高亮提高代码可读性
  2. 表格响应式: 确保表格在不同屏幕尺寸下都能正常显示
  3. 图片优化: 使用适当的图片格式和尺寸
  4. 链接检查: 定期检查外部链接的有效性

内容组织建议

  1. 逻辑结构: 保持内容的逻辑性和连贯性
  2. 标题层级: 正确使用标题层级建立文档结构
  3. 代码示例: 提供完整、可运行的代码示例
  4. 注释说明: 为复杂代码添加必要的注释说明

结论

这个测试文档涵盖了 MDX 的主要功能和特性。通过实际渲染,我们可以验证:

  1. ✅ 所有标题层级都能正确显示
  2. ✅ 文本格式化功能正常工作
  3. ✅ 代码块语法高亮效果良好
  4. ✅ 表格渲染正确且响应式
  5. ✅ 链接和引用功能正常
  6. ✅ HTML 元素能够正确嵌入

如果发现任何渲染问题,请及时调整相关的组件配置。


测试完成时间: 2025-11-24 测试环境: Next.js + Contentlayer + MDX 测试状态: ✅ 通过

Footnotes

  1. 这是脚注的内容,通常在文档底部显示。

如何设计一个高转化的 SaaS Blog 页面