Markdown 样式测试

文件下载测试

TXT词根词缀学习单词 提示词（高苗）.txt89.3 KB下载项 TXT词根词缀学习单词 提示词（高苗）.txt下载提示词文本 · 89.3 KB下载项

高级转译和跳转测试

同文件跳转

列表

显示文本

markdown-style-lab#长文本压力测试

markdown-style-lab#二级标题

异文件某标题跳转

2026-04-09-kunming-observations#饮食

异文件某行

发车间隔

测试

这是一篇专门用来调试样式的文章。它没有正式的观点，只负责把常见 Markdown 元素摆在同一个页面里，方便检查字体、间距、颜色、边框、暗色模式和移动端排版。

普通段落应该保持舒适的行高。中文正文里偶尔会夹杂 English words、数字 12345、内联代码 const mood = "calm"，以及一些强调性的写法：加粗文字、斜体文字、加粗斜体、删除线。

二级标题

二级标题通常用于文章的大段落分组。它和前后正文之间的距离，应该能让读者感觉到结构，但不要像断崖一样把阅读节奏切碎。

三级标题

三级标题适合更细的局部说明。下面是一段带链接的正文：你可以访问 Astro 官方文档 查看 Markdown 与内容集合的相关说明。

四级标题

四级标题比较少用，但它仍然需要有稳定的字号、字重和上下间距。

引用

引用块用于展示摘录、注释或某种旁白。

多段引用需要检查段落间距、左侧边线、文字颜色，以及暗色模式下的对比度。

列表

无序列表：

• 第一项内容，长度较短。
• 第二项内容稍微长一点，用来观察自动换行之后的缩进是否整齐，行距是否仍然舒服。
• 第三项包含一些内联样式：重点、代码、链接。

有序列表：

1. 先确认标题层级的视觉节奏。
2. 再检查正文、引用、列表和代码块。
3. 最后在移动端与暗色模式里看一遍。

任务列表：

• 支持已完成状态。
• 支持未完成状态。
• 检查 checkbox 和文字的垂直对齐。

代码

内联代码应该自然地嵌入段落，比如 npm run build 或 src/content/blog/posts/。

const post = {
  title: "Markdown 样式测试",
  tags: ["Markdown", "CSS", "Astro"],
  published: true
};

function describe(post) {
  return `${post.title} 包含 ${post.tags.length} 个标签。`;
}

.prose {
  max-width: 68ch;
  line-height: 1.85;
}

.prose code {
  font-size: 0.92em;
}

表格

元素	用途	检查点
标题	建立文章结构	字号、字重、间距
段落	承载主要阅读内容	行高、字宽、颜色
表格	对齐结构化信息	边框、滚动、移动端
代码块	展示技术片段	背景、缩进、换行

分隔线

下面是一条分隔线，用于检查横线样式和上下留白。

---

分隔线之后的段落不应该显得过于拥挤，也不应该像进入了另一个页面。

图片

下面使用站点 favicon 作为图片占位，用来观察正文图片的最大宽度、圆角、边框和说明文字距离。

图片下方的文字需要和图片保持合适距离。

长文本压力测试

这一段故意写得稍长一些，用来检查正文在窄屏时的换行表现。理想情况下，文章正文不应该出现横向滚动，也不应该让单词、代码片段或链接把版面撑开。阅读区域需要在桌面端保持足够克制，在手机上则要充分利用屏幕宽度，同时给左右边缘留出舒服的呼吸空间。

最后一段用于检查文章结尾处的下边距。读到这里时，页面应该自然结束，而不是贴着浏览器底部显得局促。

列表测试

有序列表

1. 1234234😋

2. 等发算高

3. 饿却听

   1. 发根
   2. 缩进测试

无序列表

• 大防晒啊

• 阿福等阿

  • 缩进测试
  • 等啊等大等