niko 加载中
0%

样式试验场 · 正文元素全谱

文章正文区域重构专用的测试长文:把所有 markdown 元素排一遍,用作视觉基线

作者天镜发布于我也不知道放哪测试样式md全谱aigc辅助

一级标题:这篇是为了把正文区域撑满

这一篇不谈剧情,只谈排版。所有内容都是测试用的,读完不会记住任何东西,但能看清每一种 markdown 元素长什么样。

  段落以全角空格开头,这是本站中文写作的常规缩进习惯。下面开始按类别把元素排一遍。

行内元素

普通文本,什么都不加,用来观察正文的字号与行距。

加粗文本,用来观察强调的第一档。

斜体文本,用来观察强调的第二档。

加粗并斜体,两档叠加时的效果。

删除线文本,用来观察被划掉的信息。

行内代码,用来观察等宽字体的落点。

这里有 一个链接,后面跟着 带标题的链接。

裸链接会自动识别:https://blog.8765777.xyz

HTML 内联也可以:下划线、高亮、Ctrl + S、上标、下标。

转义字符测试:*这不是斜体*,`这不是代码`,_这不是斜体_。

中文标点测试:「引号」、『双引号』、【方头括号】、——.破折号、……省略号、()全角圆括号。

行内还可能有表情符号:✦ ✧ ◈ ◆ ● ▲

段落与换行

这一段之后,会有一次单换行。
这一行紧跟上一行,中间没有空行,用来测试单换行是否渲染成换行。
这一行也是。

上面三行属于同一个段落,靠软换行拆开。

  这一段之后空了一整行,所以它是新段落。空行分段的间距就是靠这个来观察的。

  这一段里有一个很长的 URL,用来测试长字符串的断行行为:
https://blogr2.8765777.xyz/posts/post-20260816-sybika/inline/1786183750590-h247mi.webp
后面继续接文字,看它会不会把容器撑破。

  这一行测试连续英文与数字:AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA1234567890123456789012345678901234567890

标题层级

下面的 h3 到 h6 是密集排布,用来观察各级标题的间距是否合理。

三级标题

三级标题后面跟一句正文,观察标题与正文之间的呼吸。

四级标题

四级标题后面跟一句正文。

五级标题

五级标题后面跟一句正文。

六级标题

六级标题后面跟一句正文。六级往后就没有了。

引用

单行引用,测引用块的基本样式。

多行引用。

第二段引用,中间有空行,观察段间距。

第三段引用,看看会不会塌掉。

外层引用

嵌套的第一层

嵌套的第二层,观察左侧标记条的堆叠

无序列表

  • 无序列表第一项
  • 无序列表第二项
  • 无序列表第三项,这一项的内容比较长,长到大概要换行,用来观察悬挂缩进是否对齐得好看
  • 星号开头的列表项
  • 另一个星号项
  • 加号开头的列表项
  • 另一个加号项

有序列表

  1. 有序列表第一项
  2. 有序列表第二项
  3. 有序列表第三项

下面这个列表从 7 开始(中间空行不会打断列表,要先插一段文字才行):

  1. 从 7 开始的有序列表
  2. 第八项
  3. 第九项

嵌套列表

  • 一级项 A
    • 二级项 A-1
    • 二级项 A-2
      • 三级项 A-2-a
  • 一级项 B
    1. 一级项 B 下面挂有序列表
    2. 第二项
  • 一级项 C

任务列表

  • 已经做完的测试项
  • 另一个做完的
  • 还没做的测试项
  • 还有一个没做的

代码

行内代码已经在上面的行内元素里出现过了,这里是块级。

// 代码块:javascript
const park = new NightDopaminePark({
  colors: ["#ff3d8b", "#2af0ea", "#ffe14d"],
  radius: 20,
});

function renderVisitor(name) {
  return `归色者 ${name} 已签到`;
}
代码块:纯文本,无高亮
第一行
第二行
    带缩进的第三行
这是四个空格缩进的代码块
它没有语言标记
用来观察兜底样式

表格

元素档位用途是否长
段落基础承载正文否
引用基础引述他人否
表格扩展罗列对比是
代码块扩展贴代码是
图片基础视觉停顿视情况
左对齐居中右对齐
abc
比较长的一格内容中间1024
短长一点点7

图片

普通图片,独占一段:

猫耳帽下的星空

图片后面跟一段正文,观察图片与上下文的间距。

行内图片也试一下:这是文字中的 小图 一个行内图片,观察它与文字基线的关系。

图令

下面是本站特有的图令指令。桌面端它不显示图片,而是作为背景图切换的触发点:
当它滚过屏幕从上往下 40% 那条判定线时,背景就换成它指定的图。
(移动端没有背景层,它会直接在这里显示成一张普通图片。)

图令之前一句话。

图令之后一句话,观察触发点是否留下了多余的空白。

分隔与断点

上面用 h2 分隔,这里单独测一条水平线。


水平线之上与之下各一句。


星号形式的分隔线。


下划线形式的分隔线。

链接与脚注

带脚注的句子1,后面还有第二处脚注2。

引用式链接:拾色之域,以及 归色者。

第二处图令

上面那根触发点离得太近的话第二张会被一口气掠过,所以这里再放一根,
用来观察第二次切换:

压力测试

  这一节专门用来压边界:超长无空格中文串会不会溢出——测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试。

  混合内容:一段里同时有 加粗、斜体、代码、链接、删除、下划线,观察它们挨在一起时会不会打架。

  连续的短段落。

  第二段。

  第三段,用来观察连续小段的间距是否一致。

  最后一段,作为这篇文章的收尾,后面的「完」标记会接在这里。

Footnotes

  1. 这是第一条脚注的内容,观察脚注区域的样式与字号。 ↩

  2. 这是第二条脚注的内容,包含一个链接 https://blog.8765777.xyz 。 ↩

样式试验场 · 正文元素全谱

https://blog.8765777.xyz/posts/post-20260926-co32vp/

作者天镜发布于许可协议CC BY-NC-SA 4.0
距今已经过去