MDX 排版示例

这是一篇示例文章，用于验证各种排版元素的显示效果。正文使用系统中文字体，行高和字号针对中文阅读做了优化。

代码示例

行内代码：const greeting = "你好" 应该与正文有明显区分。

整块代码：

// 一个简单的 TypeScript 函数
function formatDate(date: Date): string {
  const y = date.getFullYear();
  const m = String(date.getMonth() + 1).padStart(2, "0");
  const d = String(date.getDate()).padStart(2, "0");
  return `${y}-${m}-${d}`;
}

带标题的代码块：

export function cn(...classes: string[]) {
  return classes.filter(Boolean).join(" ");
}

引用块

排版的目的是让读者忘记它的存在。好的版式是隐形的，它服务于内容，而不是展示自身。

中英文混排

这篇文章使用了 TypeScript、React 和 Next.js。行内英文单词应该与中文无缝混排，例如：我们用 useState 管理组件状态，用 useEffect 处理副作用。

列表

无序列表：

• 第一项内容
• 第二项内容，稍微长一点的内容用来测试换行效果
• 第三项

有序列表：

1. 安装依赖：npm install
2. 启动开发服务器：npm run dev
3. 打开浏览器访问 http://localhost:3000

自定义组件

注脚

这里有一个注脚¹，以及另一个²。