1. 标题层级测试

这一段用于测试普通段落、粗体、斜体、删除线、下划线、行内代码、以及 链接 的混合渲染效果。

1.1 二级标题下的正文

这是一段较长的正文示例。它同时包含中文、English、12345、以及一些常见符号，用来观察字重、字号、行高、字距、自动换行与中英文混排时的表现是否稳定。

1.1.1 四级标题

你还可以检查以下细节：

• 标题前后的留白是否一致
• 不同标题层级是否有清晰的视觉区分
• 标题锚点与目录是否工作正常

2. 列表测试

2.1 无序列表

• 第一层无序列表
  • 第二层无序列表
    • 第三层无序列表
• 包含 粗体文本 的列表项
• 包含 斜体文本 的列表项
• 包含 inline code 的列表项
• 包含 外部链接 的列表项

2.2 有序列表

1. 第一项
2. 第二项
   1. 第二项下的嵌套有序列表
   2. 再来一项
3. 第三项，内容稍微长一点，用来测试自动换行后编号与文本的对齐表现。

2.3 混合列表

1. 先从有序列表开始
   • 再嵌套无序列表
   • 第二个子项
2. 再回到有序列表

2.4 To-do 列表

• 未完成任务项
• 已完成任务项
• 包含 强调文本 的待办项

3. 引用与提示块

这是一段引用文本，用于测试 blockquote 的边框、缩进、颜色与排版。

这是一个多行引用示例。
第二行用于测试同一引用块中的换行。
第三行用于测试移动端的表现。

4. 折叠与层级结构

5. 表格测试

6. 分栏测试

7. 代码与技术内容测试

7.1 JavaScript 代码块

export function renderTitle(title) {
	return `<h1 class="post-title">${title}</h1>`;
}

console.log(renderTitle("Hello, Notion"));

7.2 HTML 代码块

<article class="notion-page">
	<h2>Heading</h2>
	<ul>
		<li>List item</li>
	</ul>
</article>

7.3 CSS 代码块

.notion-callout {
	border-radius: 16px;
	padding: 1rem 1.25rem;
	background: linear-gradient(180deg, #fff, #f7f7f7);
}

7.4 Mermaid 图表

flowchart TD
	A["Notion 页面"] --> B["内容解析"]
	B --> C["Markdown / AST 转换"]
	C --> D["网站前端渲染"]
	D --> E["最终页面输出"]

7.5 数学公式

当 $a^2 + b^2 = c^2$ 时，可以观察行内公式的基线与字号表现。

8. 图片与媒体测试

8.1 图片

8.2 视频

8.3 音频

9. 特殊排版细节测试

这一段包含一些容易出问题的内容：

• 中英文混排：Notion、Next.js、MDX、React Server Components
• 数字与单位：16 px、1.5 rem、100%
• 标点与引号：「直角引号」、「括号（parentheses）」、破折号 —— 以及冒号：分号；
• 转义字符：* [ ] { } < >

9.1 行内换行测试

第一行
第二行
第三行

10. 结尾测试

如果你能完整看到以下内容，说明基础渲染大概率已经打通：

1. 标题层级正常
2. 列表缩进正常
3. 表格边框正常
4. 图片与媒体可见
5. 代码高亮正常
6. 折叠块可交互
7. 分栏在不同尺寸下表现合理