渲染测试：字体、排版与 Markdown 元素

这是一篇测试文章，用来观察站点的整体渲染效果。观察点：正文与代码块的字形是否清晰、等宽对齐是否稳定、语法高亮是否区分度足够、数学公式是否正确排版、各类列表与表格是否规整，以及选中代码文本时的灰白反色效果。

字符渲染

中日简繁

简体中文：软件开发者的日常是调试、重构与发布。

繁体中文：軟體開發者的日常是除錯、重構與發佈。

假名、谚文与西里尔字母

日文假名：ひらがなカタカナ、日本語のソフトウェア開発はデバッグ、リファクタリング、リリースの繰り返しです。

谚文：한국어 인터페이스, 디버깅과 리팩토링 그리고 배포.

西里尔字母：Русский язык — отладка, рефакторинг и публикация приложения.

希腊字母与生僻汉字

希腊字母：α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω，以及大写 Α Β Γ Δ Ε。

生僻汉字：龘爨齉靐齑䲜犇骉羴麤䨻齺籲鬱鱻。

标点、数字与货币符号

全角与半角：ＡＢＣ１２３（全角）与 ABC 123（半角）并排，（）（）「」『』、【】《》等中文标点。

货币符号：¥ € £ ₽ ₩ ฿ ₺ ₹。注：为避免与数学公式混淆，本段刻意不含美元符号。

上下标：化学式 H₂O 与 CO₂，平方米 m²、立方米 m³、温度 25 ℃ 与 −20 ℉。

标题与文本

三级标题的观感

三级标题用于小节，字号与字重都应明显区别于正文。

四级标题

四级标题不再进入目录（目录只收录二级标题），字号与正文接近，仅靠字重区分。

强调与标记

普通文字里可以混用粗体、斜体、~~删除线~~与高亮标记，观察各字形在同段中的和谐度，以及粗体是否换了字重层级（思源黑体的粗体是独立字重，不应出现合成加粗）。

中英混排

中英文混排时，英文单词 JetBrains Mono、Source Han Sans 与中文的基线应对齐；行内代码 fetchUser(id) 与链接 Astro 不应破坏行高。

长内容换行

超长 URL 与超长单词考验 overflow-wrap: anywhere 是否生效：

https://example.com/this-is-a-very-long-url-that-goes-on-and-on-and-on/with/many/segments?query=alpha&fragment=section-2

Supercalifragilisticexpialidocious 是一个很长的英文单词，Antidisestablishmentarianism 也是，还有 Pneumonoultramicroscopicsilicovolcanoconiosis。

列表与引用

无序列表：

设计稿评审
组件库建设
发布流水线

有序列表与嵌套：

第一阶段：搭骨架
- 路由与布局
- 主题变量
第二阶段：填内容
- 文章系统
- 归档与标签
第三阶段：打磨

任务列表（GFM）：

编写测试文章
覆盖列表、表格、代码块
覆盖图片与更多交互（待续）

引用块：

文字工作者的对手不是打字速度，而是修改的成本。好的排版让修改变得更便宜，因而也让人更愿意修改。

嵌套引用：

外层引用的内容，字号应比正文略大。

内层引用继续缩进，观察边界与背景色的层次。

回到外层后，间距与对齐应恢复正常。

表格

语言	用途	特点	对齐效果测试
TypeScript	前端应用	类型安全	左对齐
Python	数据处理	生态丰富	居中
Rust	系统编程	零成本抽象	右对齐
Go	服务端	并发原语	默认

单元格里的长文本同样考验换行：本列应自动折行而不会撑破表格宽度，比如「这是一段用来测试单元格换行的较长的文字内容」。

链接

代码

行内代码 console.log('hello') 与中文混排时，代码字体栈（JetBrains Mono + 思源黑体）应保持字号缩进与垂直对齐；选中行内代码时同样应出现灰白反色。

TypeScript 与生僻字变量名

// 生僻字变量名（仅供渲染测试）
const 龘 = 'dragon-flight';
const 爨 = 'cooking-fire';

type ProviderSession =
  | { mode: 'jwt'; value: string; persistable: true }
  | { mode: 'import-token'; value: string; persistable: true };

export function classify(s: ProviderSession): string {
  return s.mode === 'jwt' ? `token: ${s.value}` : 'import';
}

Python 与中文注释

# 简体：从缓存读取数据
# 繁体：從快取讀取資料
# 日本語：キャッシュからデータを読み取ります
def fetch(key: str) -> str:
    cache = storage.get(key)  # 命中则直接返回
    return cache or load_from_db(key)

其他语言

.code-block::selection {
  background: #e8e8e8; /* 灰白 */
  color: #1f1f1f;      /* 灰黑 */
}

{
  "name": "rendering-test",
  "version": "1.0.0",
  "dependencies": { "remark-math": "^5", "rehype-katex": "^7" }
}

<div class="card" data-active="true">
  <span>连字：-&gt; =&gt; !== === &lt;= &gt;= ::</span>
</div>

npm run build    # 构建产物输出到 dist/
npm run dev      # 本地开发，默认 4321 端口

长行与横向滚动

下面这行远超阅读宽度，代码块应出现横向滚动条而不是折行破坏缩进：

const longLine = fn(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, { option: 'value', deeply: { nested: true } }).then(result => result.map(item => item.value).join(','));

编程连字（ligature）：-> => != === <= >= :: // 会被 JetBrains Mono 合并显示；英文连字 office、filing、efficient 中的 fi/fl 同样在此字体下合并。

数学公式

行内公式：欧拉恒等式 $e^{i\pi} + 1 = 0$ 与质能方程 $E = mc^2$ 出现在中文句子中。

块级公式：

\int_{-\infty}^{+\infty} e^{-x^2}\,dx = \sqrt{\pi}

分段函数：

f(x) = \begin{cases} x^2 & x \geq 0 \\ -x^2 & x < 0 \end{cases}

矩阵与求和：

A = \begin{pmatrix} a & b \\ c & d \end{pmatrix}, \qquad \sum_{k=1}^{n} k = \frac{n(n+1)}{2}

emoji 与符号

常用 emoji：😀 🎉 🚀 ❤️ 🔧 📦；带肤色变体的手势：👍🏽 👩🏿；旗帜：🇯🇵 🇰🇷；符号类：♻️ ⚠️ ✨。

箭头与数学符号：→ ← ↑ ↓ ⇒ ⇔ ∞ ± × ÷ ≈ ≠ ≤ ≥ ∈ ∉ ∪ ∩ ∑ ∏。

选中态与结语

正文与代码块的选择颜色不同：正文 ::selection 是黑底白字，代码块则是灰白反色（背景 #e8e8e8、文字 #1f1f1f），用于确认选中与未选中状态一眼可分。

如果本页各类字符清晰可辨、等宽对齐稳定、公式排版正确、列表表格规整，则说明站点的渲染链路工作正常。