官网测试

正文排版示例（Markdown）

jinzita2026-09-290 浏览

用 Markdown 写的示例，和富文本那篇对照，看两种写法排版是否一致。

这是一篇用 Markdown 写的示例文章，和另一篇富文本示例内容相近，用来对比两种写法在前台的排版是否一致。

目录

一、为什么要统一排版

同一个网站里，新闻、产品介绍和 AI 回答如果各用一套字号与行距，读者会觉得像在看几个不同的网站。统一之后，正文 16px、行高 1.8，标题分三级，层次靠字号和留白，而不是靠下划线。

1. 段落与留白

段落之间留出一行左右的间距；标题前多留一点、标题后收紧，读者一眼就能看出哪几段属于同一个小节。

这一段故意写得长一些，用来观察折行后的行距是否舒服。中文长段落最怕行距太紧，读到第三行就开始串行；也怕太松，一段话散成几行互不相干的句子。

2. 列表

  • 无序列表的符号挂在文字外侧；
  • 折行时，第二行与第一行的文字对齐，而不是缩到符号下面，这一条写长一点来看折行的效果；
    • 二级列表缩进一格；
    • 与上一级之间的间距更小。
  • 列表项之间有少量间距，不会挤成一团。
  1. 先写结论；
  2. 再给依据；
  3. 最后给出下一步建议。
  • 已完成：统一字号与行距
  • 待办：整理图片的宽高规范

二、引用与强调

好的排版，是让读者感觉不到排版的存在。

引用可以有多段，段与段之间同样留出间距。

需要提醒读者注意的词可以用加粗；中文不使用斜体，因为中文字体没有真正的斜体字形。

三、表格

档位正文一级标题二级标题三级标题
文章档16px26px22px18px
对话档约 14px20px18px16px

四、代码

行内代码像这样：npm run build。多行代码使用代码块：

function greet(city: string) {
  return `欢迎来到${city}`;
}

console.log(greet("杭州"));

更多内容可以回到 官网首页 查看。