暂不支持移动端访问

Markdown 与文章排版兼容性测试

1159 字 6 分钟
人工编写

一篇面向公开展示的文章排版测试,覆盖标题、文本样式、列表、引用、表格、长内容与脚注。

这是一篇可以正常公开阅读的 Markdown 兼容性文章。它把常见写作元素整理成连贯的内容,用来确认文章在蓝色主题、粉色主题以及不同电脑端宽度下,都能保持清晰、稳定的阅读体验。

正文会同时出现中文、English、数字 2026、百分比 98.5% 和行内代码 pnpm build。这些内容应自然换行,不能撑破文章容器,也不应因为字体回退产生明显的基线跳动。

标题层级与文本样式#

文章正文通常从二级标题开始。目录中的条目应当与这里的标题一致,点击锚点后,标题不能被固定导航栏遮挡。

常用的行内表达#

一段内容可以包含粗体文字斜体文字已经删除的说明需要注意的片段inline code。还可以使用 H2O、x2,以及带解释的缩写 CSS

访问者可以打开 Astro 官方文档,也可以通过站内链接返回首页。外部链接、内部链接、悬停状态和键盘焦点都应清楚可辨。

更深一层的标题#

四级标题适合说明章节中的细节。它应该弱于二级和三级标题,但仍然不能退化成普通正文。

五级标题#

五级标题用于较小的补充主题,需要保持足够的字重和上下间距。

六级标题#

六级标题是本文最深的层级,用来确认排版系统对完整标题结构的支持。

列表与任务状态#

无序列表适合记录不强调先后顺序的信息:

  • 第一项是一段普通中文说明。
  • 第二项包含 inline code 和一个示例链接
  • 第三项包含嵌套结构:
    • 子项 A:检查项目符号和缩进。
    • 子项 B:Check mixed-language alignment.
      • 更深一层仍应留在正文轨道内。
  • 列表结束后,应当与下一段保持稳定间距。

有序列表可以表达实际流程:

  1. 编写并检查 Frontmatter。
  2. 完善文章正文。
    1. 检查标题和目录。
    2. 检查图片、表格与代码。
  3. 执行构建和浏览器回归。

任务列表用来展示完成状态:

  • 中英文混排
  • 嵌套列表
  • 表格与脚注
  • 在发布后检查线上 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";

脚注#

文章可以包含简短脚注1,也可以使用带有多段说明的脚注2。脚注编号和返回正文的链接应当可见、可聚焦。

验收结论#

如果标题目录、文本样式、列表、引用、表格、长链接和脚注都能稳定显示,并且文章在常用电脑端宽度下没有横向溢出,这一页的基础 Markdown 验证就算通过。

Footnotes#

  1. 这是一条简短脚注,用于检查字号、颜色和回链。

  2. 这是一条较长脚注,包含中文、English words、inline code 和一个外部链接

    脚注中的第二段用于检查缩进、多段内容和段落间距。

[ 公告 ]

如果你喜欢,那么欢迎来到我的世界!

了解更多
[ 音乐 ]
封面

音乐

找不到相关结果。
[ 目录 ]
[ 全部文章 ]