排版与渲染实验

这篇文章没有观点，只有素材。它的作用是把博客正文可能出现的每一种元素都摆出来，检查字号、行高、间距和颜色在浅色与深色下是否都成立。

一、文字

正文可以用 加粗 强调重点，用 斜体 表示书名或外文词，也可以 划掉 已经作废的结论。行内代码写成 const posts = getAllPosts() 这样。

链接的颜色应该和正文区分开，同时不能太跳：MDX 文档、CommonMark 规范。

中文排版里还有一个容易被忽略的点：中英文之间要有空隙，标点用全角。这一段故意混排了 English words 和中文，用来检查行高是否稳定。

引用块适合放结论。

它也可以有第二段，用来测试段间距。

二、列表

无序列表：

• 第一项
• 第二项，带一点说明
  • 嵌套项 A
  • 嵌套项 B
• 第三项

有序列表：

1. 先读文件
2. 再解析 frontmatter
3. 最后排序返回

任务列表（GFM）：

• 接上 MDX
• 加代码高亮
• 加全文搜索

三、表格

表头的对齐方式应该跟随冒号，上表的第二列是右对齐。

四、代码

type Post = {
  slug: string;
  title: string;
  date: string;
};
 
export function sortByDate(posts: Post[]): Post[] {
  // 日期都是 YYYY-MM-DD，字符串比较即可
  return [...posts].sort((a, b) => b.date.localeCompare(a.date));
}

命令行也要能看：

pnpm add remark-gfm remark-math rehype-katex
pnpm build

五、公式

行内公式要能和文字对齐：质能方程 $E = mc^2$，等差数列求和 $\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$。

独立公式居中显示：

矩阵与行列式：

六、图表

下面这张图是手写的 SVG，不依赖任何图表库，颜色取的是主题变量，所以深色模式会自动跟着变。

七、其他

分隔线：

脚注也是 GFM 的一部分¹。

最后一行用来确认正文底部和页脚之间有足够留白。