Markdown 排版全要素测试

这篇文章没有观点，只有元素。它是排版系统的验收清单，任何全局样式改动都应该先在这里过一遍。

标题与正文

正文的目标是舒展：中文行高 1.85，段落之间留足呼吸。加粗用于真正的强调，斜体在中文语境里少用，行内代码则要和正文明显区分。链接样式看这里：Nuxt Content 文档。

三级标题的层次

三级标题比二级小一档，不带上边框。它负责在章节内部再分一层，不应该再往下嵌套了，四级标题基本是文档结构出问题的信号。

列表

无序列表用方形标记，强调色只出现在符号上：

• 静态生成的站点没有运行时依赖
• 内容和代码住在同一个仓库
• 构建产物可以被完整缓存

有序列表适合流程：

1. 在 content/posts/ 新建 Markdown 文件
2. 写好 frontmatter 和正文
3. 提交，CI 跑 pnpm generate
4. 产物同步到静态托管

任务列表也能用：

• 定义内容集合
• 打通 RSS 输出
• 接入评论系统（外挂方案，待定）

引用

好的工具应该退到背景里。当你意识不到它存在的时候，它正在正常工作。

多段引用同样成立：

写作的敌人不是没有灵感，而是摩擦。

每多一步操作，就少一篇文章。

表格

代码块

TypeScript，带高亮：

interface Post {
  title: string
  date: string
  tags: string[]
}

function byDateDesc(a: Post, b: Post): number {
  return b.date.localeCompare(a.date)
}

Shell 命令：

pnpm generate
npx serve .output/public

Diff 视图：

- const posts = await queryCollection('posts').all()
+ const posts = await queryCollection('posts')
+   .where('draft', '=', false)
+   .all()

Vue 单文件组件：

<script setup lang="ts">
const { data: page } = await useAsyncData('about', () =>
  queryCollection('pages').path('/about').first(),
)
</script>

<template>
  <ContentRenderer :value="page" />
</template>

图片

图片默认通栏、带一像素边框，和站点的硬边风格保持一致：

分隔线

正文的最后一个元素是它：

测试结束。如果以上所有元素看起来都还体面，说明排版系统状态良好。