UI 渲染测试页（全要素）

本页是 UI 渲染测试页，覆盖博客渲染管线的全部要素，用于视觉审查和回归测试。每节标题即测试点。

# 1. 标题层级

# 1.1 三级标题 h3

# 四级标题 h4

# 五级标题 h5

# 六级标题 h6

# 1.2 另一个三级标题（用于 TOC 缩进测试）

# 2. 文本样式

普通段落：加粗、斜体、删除线、inline code、外部链接、站内链接。

中文强调：这是着重点测试（CJK emphasis）。

中英文混排测试：在 VSCode 中使用 Git 管理 Node.js 项目时，需要注意 ESLint 与 Prettier 的配置冲突问题。这是一段较长的混排文本，用于观察 text-autospace 和两端对齐效果。

# 3. 列表

# 3.1 无序列表

• 一级项目 A
• 一级项目 B
  • 二级项目 B1
  • 二级项目 B2
    • 三级项目 B2a
• 一级项目 C

# 3.2 有序列表

1. 第一步：初始化
2. 第二步：配置
   1. 子步骤 2.1
   2. 子步骤 2.2
3. 第三步：验证

# 3.3 任务列表

• 已完成任务
• 未完成任务
• 待办：测试复选框渲染

# 4. 引用块

单行引用：简洁即美。

多段落引用第一行。

多段落引用第二行，包含加粗和 代码。

# 5. 代码块

# 5.1 bash

#!/bin/bash
pnpm --filter blog build && pnpm --filter blog test
echo "构建完成，退出码: $?"

# 5.2 typescript

interface BannerConfig {
    image: string | null;
    height: number;
    typingText?: string;
    showArrow?: boolean;
}

export function resolveBanner(cfg: BannerConfig): string {
    return cfg.image ?? "fallback-gradient";
}

# 5.3 python

def fibonacci(n: int) -> list[int]:
    a, b = 0, 1
    result = []
    for _ in range(n):
        result.append(a)
        a, b = b, a + b
    return result

# 5.4 json

{
    "name": "blog",
    "version": "0.1.0",
    "dependencies": { "vue": "^3.5.35" }
}

# 5.5 diff

- const oldValue = "删除的行";
+ const newValue = "新增的行";
  const unchanged = "不变的行";

# 5.6 超长行（横向滚动测试）

curl -X POST "https://api.example.com/v1/very/long/endpoint/path/that/keeps/going/and/going/to/test/horizontal/scrolling/behavior/in/code/blocks?param1=value1&param2=value2&param3=value3"

# 5.7 无语言标记代码块

plain text code block
no language specified

# 6. 表格

# 6.1 普通表格

# 6.2 宽表格（溢出测试）

# 7. 图片

# 8. 分隔线

上文内容。

下文内容。

# 9. Mermaid 图表

# 9.1 流程图

# 9.2 时序图

# 10. 数学公式（KaTeX 测试）

行内公式：质能方程 $E = mc^2$ 应该被渲染。

块级公式：

$$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$

# 11. 提示块（Admonitions）

echo "甚至支持代码块"

# 12. 定义列表

术语 A

术语 A 的定义内容。

术语 B

术语 B 的定义内容，可以较长一些，用于测试 dd 的缩进和排版效果。

# 13. 长文滚动测试（TOC 高亮）

# 13.1 第一节

为了测试 TOC 的 IntersectionObserver 高亮行为，需要足够长的内容让页面可滚动。这一段是填充文本。博客的正文排版应该清晰易读，行高适中，段间距合理。中文排版需要特别注意标点符号的行首行尾规则（line-break: strict）。

# 13.2 第二节

继续填充内容。好的排版应该让读者在长时间阅读时不感到疲劳。字号的选取、行距的设置、行长的控制都会影响阅读体验。根据调研，中文正文每行 25-40 个字符是最佳范围。

# 13.3 第三节

再多一些内容。代码块、图片、表格等富媒体元素的渲染质量同样重要。它们应该与正文文本和谐统一，而不是显得突兀。移动端的表现尤其需要关注，因为小屏幕上任何排版问题都会被放大。

# 13.4 第四节

最后一节填充。测试页应该可以长期复用，每次 UI 变更后回归检查：明暗两态、桌面/平板/移动三档视口、所有组件的渲染是否正确。

测试页结束。 检查清单：明暗主题 × 3 视口 × 上述 13 节全部要素。