Markdown 样式测试总览

这是一篇专门用于测试博客正文样式的文章。
它会覆盖标题、段落、强调、列表、引用、代码块、表格、图片、分隔线，以及行内公式和块级公式。

你可以用它来检查：

正文行高是否舒适
标题层级是否清晰
衬线体是否符合预期
引用块、代码块、表格是否协调
数学公式区域是否需要单独优化

1. 段落、强调与链接

这是普通正文段落。这里混合一些常见的行内样式：粗体、斜体、粗斜体、行内代码。
这里再放一个链接：Astro 官方文档。

下面再放一段稍长的文字，用来观察你站点当前的阅读节奏是否偏紧或者偏松：

在一个以内容为核心的个人博客里，排版不是装饰，而是阅读体验本身。字体、段落间距、行宽、对比度、链接样式、标题层级和代码块背景，都会影响整篇文章的气质。你现在这一步做的不是“把 Markdown 显示出来”，而是在确定整个站点未来几个月甚至几年的阅读基调。

2. 二级标题下的三级标题

2.1 一个较短的小节

这里是一段较短的说明文本，用于观察 h2 和 h3 之间的距离感。

2.2 一个较长的小节

这一小节稍微长一点，用来观察标题与正文之间的留白是否合适。
如果你想走偏 Claude / 编辑部 / 出版物的方向，那么标题通常不需要太黑、太硬，也不需要过度放大，而应该更注重节奏和呼吸感。

3. 列表测试

无序列表

第一项
第二项
第三项
- 子项 A
- 子项 B
  - 更深一层的子项
第四项

有序列表

第一步：建立 layout
第二步：建立 global 样式
第三步：接入 content collection
第四步：建立文章详情页
第五步：抽离 prose 阅读样式

任务清单

4. 引用块测试

这是一段普通引用。
它应该比正文更柔和一点，但又不应该弱到失去存在感。

一个好的博客正文引用块，不应该像警告框，
也不应该像页面里突然多出一张厚重卡片。
它更像作者在正文旁边压低声音补充的一段说明。

5. 分隔线测试

上面是正文内容。

下面是新的内容区块。
这里主要看分隔线和上下留白有没有打断阅读。

6. 代码测试

行内代码

例如，在 Astro 中你可能会写 getCollection('blog') 来读取文章列表。

代码块：TypeScript

import { defineCollection } from 'astro:content';
import { glob } from 'astro/loaders';
import { z } from 'astro/zod';

const blog = defineCollection({
  loader: glob({
    pattern: '**/*.md',
    base: './src/content/blog',
  }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    draft: z.boolean().default(false),
    tags: z.array(z.string()).default([]),
  }),
});

export const collections = { blog };

代码块：Astro

---
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getCollection } from 'astro:content';

const posts = await getCollection('blog');
---

<BaseLayout title="博客">
  <main>
    <section>
      {posts.map((post) => <p>{post.data.title}</p>)}
    </section>
  </main>
</BaseLayout>

代码块：Bash

mkdir -p src/content/blog
npm run dev

7. 表格测试

名称	类型	状态	说明
首页	页面	已完成	当前已有基础 Hero
博客列表	页面	已完成	能展示文章列表
文章详情页	页面	已完成	能渲染 Markdown 正文
About	页面	未完成	需要后续补充
Tools	模块	未完成	只预留结构

8. 图片测试

下面是一张示意图占位。你后面可以替换成自己的图片资源路径。

测试图片占位

这段文字用于观察图片上下留白、圆角和图片后的正文衔接是否自然。

9. 数学公式测试

这一部分专门用来测试你站点未来的数学公式样式。

行内公式

牛顿第二定律可以写成 $F = ma$ 。
勾股定理可以写成 $a^2 + b^2 = c^2$ 。
正态分布密度函数中常见的指数项为 $e^{-\frac{(x-\mu)^2}{2\sigma^2}}$ 。

块级公式

欧拉公式：

e^{i\pi} + 1 = 0

二次方程求根公式：

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

高斯分布概率密度函数：

f(x) = \frac{1}{\sqrt{2\pi\sigma^2}} \exp\left(-\frac{(x-\mu)^2}{2\sigma^2}\right)

矩阵示例：

A = \begin{bmatrix} 1 & 2 & 3 \\ 4 & 5 & 6 \\ 7 & 8 & 9 \end{bmatrix}

求和与积分：

\sum_{k=1}^{n} k = \frac{n(n+1)}{2}

\int_0^1 x^2 \, dx = \frac{1}{3}

数学与正文混排测试

当我们讨论一个函数 $f(x) = x^2 + 2x + 1$ 时，通常也会顺手提到它可以写成 $(x+1)^2$ 。
如果正文中公式较多，就需要额外注意行高、行内公式的垂直对齐，以及块级公式上下留白是否过大。

10. 脚注测试

这里有一句带脚注的话。¹

11. 混合内容测试

下面这个区块故意把列表、公式和代码混在一起，方便你观察复杂内容的阅读效果。

一个简化的数据分析流程可能是：

定义目标变量 $y$
设定模型 $y = \beta_0 + \beta_1 x + \varepsilon$
拟合参数
查看结果
输出图表

对应的伪代码可能是：

import numpy as np

x = np.array([1, 2, 3, 4, 5])
y = 2 * x + 1

coef = np.polyfit(x, y, 1)
print(coef)

如果这里的视觉层次看起来不乱，就说明你的 prose 样式已经比较稳了。

12. 最后一个结尾段落

如果这篇测试文章显示正常，那么你接下来就可以开始微调：

标题大小
正文行距
blockquote 风格
代码块背景
表格边框
数学公式区域的留白与滚动行为

你也可以把它当成之后每次改样式时的固定回归测试文章。

这是一个脚注示例，用于测试脚注在 Markdown 渲染中的表现。 ↩