这是一篇可以正常公开阅读的 Markdown 兼容性文章。它把常见写作元素整理成连贯的内容,用来确认文章在蓝色主题、粉色主题以及不同电脑端宽度下,都能保持清晰、稳定的阅读体验。
正文会同时出现中文、English、数字 2026、百分比 98.5% 和行内代码 pnpm build。这些内容应自然换行,不能撑破文章容器,也不应因为字体回退产生明显的基线跳动。
标题层级与文本样式
文章正文通常从二级标题开始。目录中的条目应当与这里的标题一致,点击锚点后,标题不能被固定导航栏遮挡。
常用的行内表达
一段内容可以包含粗体文字、斜体文字、已经删除的说明、需要注意的片段和 inline code。还可以使用 H2O、x2,以及带解释的缩写 CSS。
访问者可以打开 Astro 官方文档,也可以通过站内链接返回首页。外部链接、内部链接、悬停状态和键盘焦点都应清楚可辨。
更深一层的标题
四级标题适合说明章节中的细节。它应该弱于二级和三级标题,但仍然不能退化成普通正文。
五级标题
五级标题用于较小的补充主题,需要保持足够的字重和上下间距。
六级标题
六级标题是本文最深的层级,用来确认排版系统对完整标题结构的支持。
列表与任务状态
无序列表适合记录不强调先后顺序的信息:
- 第一项是一段普通中文说明。
- 第二项包含
inline code和一个示例链接。 - 第三项包含嵌套结构:
- 子项 A:检查项目符号和缩进。
- 子项 B:Check mixed-language alignment.
- 更深一层仍应留在正文轨道内。
- 列表结束后,应当与下一段保持稳定间距。
有序列表可以表达实际流程:
- 编写并检查 Frontmatter。
- 完善文章正文。
- 检查标题和目录。
- 检查图片、表格与代码。
- 执行构建和浏览器回归。
任务列表用来展示完成状态:
- 中英文混排
- 嵌套列表
- 表格与脚注
- 在发布后检查线上 CDN 缓存
引用与分隔线
好的排版不会夺走内容的注意力,而是帮助读者理解内容。
引用中的第二段应保持连续的视觉层级,并在蓝色和粉色主题下拥有足够对比度。
嵌套引用用来检查边框、背景和缩进是否会重复得过于强烈。
分隔线应当划分内容,但不能比章节标题更加醒目。常见字符也应正确显示:© ® ™ → ← ↑ ↓ ± × ÷ ≈ ≠ ≤ ≥ ∞,以及日文「雪可のブログ」、韩文 안녕하세요 和 emoji 🌸 ✨ 🧭。
表格
表格在宽屏下应自然展开;如果可用空间不足,只允许表格区域横向滚动,不能让整个页面出现横向滚动条。
| 项目 | 中文说明 | English description | 状态 | 数值 |
|---|---|---|---|---|
| 正文宽度 | 保持适合阅读的行长 | Keep a readable measure | 检查 | 800 px |
| 图片 | 不超过文章容器 | Never overflow the article | 检查 | 100% |
| 代码块 | 仅在自身内部滚动 | Scroll inside the code frame | 检查 | 1,024 px |
| 长单元格 | 这段文字故意稍长,用来确认单元格会自然换行,而不是被全局的不换行规则撑破页面。 | This long cell must wrap safely inside the table. | 重点 | 9,999.99 |
长内容与断行
下面是一条较长的网址,必要时需要安全断行:https://example.com/articles/markdown-compatibility?viewport=desktop-1024&theme=pink&language=zh-CN
不含空格的长标识符也不能制造页面级溢出:
MarkdownCompatibilityScenarioWithAnIntentionallyLongIdentifierThatMustStayInsideTheArticleContainer20260720
行内代码同样需要遵守正文边界,例如 const compatibilityIdentifier = "a-long-value-that-must-wrap-without-breaking-the-page";。
脚注
验收结论
如果标题目录、文本样式、列表、引用、表格、长链接和脚注都能稳定显示,并且文章在常用电脑端宽度下没有横向溢出,这一页的基础 Markdown 验证就算通过。