Markdown 排版示例

这是一篇排版样张。调整字号、行高或段落间距后，可以回到这里，看同一份内容在桌面、手机和深色模式下的表现。

页面顶部的文章标题是一级标题（H1），正文从二级标题开始。下面既有短句，也有稍长的段落，方便比较连续阅读时的节奏。

可以通过文章目录跳到某一种元素，也可以从头阅读，比较相邻内容之间的排版节奏。

标题层级

这是二级标题（H2），用来划分文章的主要部分。标题和正文之间应当有清楚的区别，又能自然地接着读下去。

三级标题

三级标题（H3）表示当前部分里的一个小节。它比二级标题轻一些，适合整理一组相关的内容。

四级标题

四级标题（H4）继续细分小节。这里放一段说明，用来观察小标题和正文的字号、字重与间距。

五级标题

五级标题（H5）更适合标注细节。可以比较它的颜色和字重，以及上下相邻段落的距离。

六级标题

这是六级标题（H6）下的正文。日常文章通常用不到这么深的层级，这里保留一个完整的示例。

段落与文字

写下一段文字时，注意力往往先落在内容上。等到回头阅读，才会发现行距太紧、段落太长，或者强调的地方过多。好的排版应该让人容易找到下一行，也能在读完一段之后，稍微停一下再继续。

这一段比上一段短。两段放在一起，可以观察自然换行后的行距，以及段落之间是否留出了合适的空间。

同一句话里可以出现加粗的重点、轻一点的斜体、已经删去的说法，以及 inline code。它们都应该留在句子的阅读节奏里。

链接也可以穿插在正文中，例如返回首页、浏览文章归档，或者查看 Typeset 官方文档。

列表

无序列表

• 先写清楚正在讨论的问题。
• 留下尝试和取舍的过程。
  • 哪一种方法最容易理解？
  • 哪些细节需要单独说明？
    • 在手机上确认换行。
    • 在深色模式下确认对比度。
• 最后检查读者是否能顺着文章找到答案。

有序列表

1. 新建一篇文章，填写标题、摘要和发布日期。

2. 整理正文，并在需要的位置加入列表、表格或代码。

   这一段属于第二个步骤。它展示列表项中包含完整段落时的缩进和间距。

   • 代码使用语言标记。
   • 表格保留清楚的列名。

3. 预览文章，检查链接与资源，再发布内容。

引用

有些问题，写下来之后才看得清楚。

下面是一段包含多个段落和嵌套内容的引用：

引用可以保留一段话原来的上下文，也可以让读者在长文中稍作停顿。

当引用里有不止一个段落时，仍然需要清楚的段落间距。

这是引用中的引用，用来观察第二层缩进。

回到普通段落后，正文应当恢复原有的宽度和对齐方式。

表格

列的对齐

第一列左对齐，第二列居中，第三列右对齐。数值仅用于展示排版。

宽表格

这张表故意保留了较多的列。在较窄的屏幕上，可以在表格内左右滚动，阅读完整内容。

表格后接一段普通文字，用来确认横向滚动区域之外的正文依然正常换行。

任务列表

任务状态保存在 Markdown 中，用 [x] 表示已完成，用 [ ] 表示未完成。这里的复选框用于展示文档状态。

• 展示完整的标题层级。
• 加入嵌套列表和引用。
• 准备带语法高亮的代码块。
• 在不同屏幕宽度下比较排版。
• 按自己的阅读习惯调整段落间距。

代码块

TypeScript

代码块包含类型、字符串、数组和空白行，可以一起观察高亮、缩进与行号。长行保留原有格式，通过代码块自身的滚动区域查看。

type Note = {  title: string  published: boolean}
const notes: Note[] = [  { title: "Markdown 排版示例", published: true },  { title: "还在整理的想法", published: false },]
const titles = notes.filter((note) => note.published).map((note) => note.title)const description =  "这是一行故意写得比较长的示例文字，用来确认在手机上阅读代码时，可以横向滚动，也可以完整复制。"
console.log(titles, description)

JSON

{  "title": "Markdown 排版示例",  "tags": ["Markdown", "Typeset"],  "published": true}

Shell 命令

pnpm devpnpm typecheckpnpm build

不指定语言

不标注语言时，代码块按纯文本显示，仍然可以查看行号和复制内容。

content/posts/markdown-typeset/├── index.mdx└── cover.svg

分隔线与脚注

分隔线可以在两个话题之间留出一次停顿。

这里是分隔线之后的正文。脚注适合放一些不需要立即展开的补充说明。¹

预览结束后，可以回到标题层级再看一遍，或去文章归档继续阅读。