y7.hk 现代工程文章渲染解剖

这篇文章汇集了文章渲染引擎的所有视觉、排版与媒体能力。

1. 提示块与旁注（Callouts）

提示块遵循网站整体的单色风格 — 干净的内嵌块，没有红绿灯式的彩色边框：

2. 图像与媒体

双栏对比（媒体网格）

用于对比“修改前”与“修改后”界面的双图网格：

作者实时头像视频

集成在卡片界面中的圆形视频组件：

Yakushev Hermann

Product Engineer · Southeast Asia

/me.mp4

3. 代码、Diff 补丁与终端

重构 Diff 补丁

新增行以柔和的祖母绿高亮，删除行以柔和的暗红色高亮：

  export async function handleRequest(req: Request): Promise<Response> {
-   const legacyToken = req.headers.get("x-legacy-token");
-   if (!legacyToken) return new Response("Unauthorized", { status: 401 });
+   const authSession = await verifyAgentSession(req);
+   if (!authSession.valid) {
+     return Response.json({ error: "Session expired" }, { status: 403 });
+   }

    return await processWorkflow({
-     mode: "sync",
+     mode: "streaming-duplex",
      timeout: 30000,
    });
  }

终端命令（Bash）

$ 提示符不会被复制到剪贴板，这归功于 user-select: none 选择器：

git clone https://github.com/yakushev/Y.git && cd Y
npm install
npm run build

4. 数学与 KaTeX 公式

展示公式（Display Math）

复杂公式在移动端支持横向滚动渲染：

\mathcal{L}_{\text{total}} = \alpha \cdot \mathbb{E}_{x \sim p_{\text{data}}}\left[\log D(x)\right] + \beta \cdot \sum_{i=1}^{N} \left\| \nabla_x f(x_i) \right\|_2^2

Transformer 注意力公式¹：

\text{Attention}(Q, K, V) = \text{softmax}\left(\frac{QK^T}{\sqrt{d_k}}\right)V

行内公式

正文中直接嵌入数学符号和方程：e^{i\pi} + 1 = 0、矩阵乘法 A \times B \in \mathbb{R}^{m \times p}，以及梯度范数 \|\nabla \theta\| \le \epsilon。

5. 支持滚动的表格

表格会自动包裹在自适应滚动容器中，在手机上也能保持可读性：

6. 可折叠剧透（<details>）

用于隐藏日志或可选片段的交互式手风琴：

{
  "id": "chatcmpl-98a72b",
  "model": "deepseek-r1",
  "choices": [
    {
      "message": {
        "role": "assistant",
        "content": "模式验证成功。"
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 128,
    "completion_tokens": 42
  }
}

7. 清单与快捷键

Markdown 格式的任务列表：

• 已配置彩色 callout 支持
• 已实现 diff 代码高亮
• 已集成 KaTeX 数学公式
• 已添加衬线 / 无衬线切换器
• 已为媒体文件添加 <figcaption> 样式
• 计划添加交互式 3D canvas 场景

控制快捷键：

• 按 ⌘ + K 打开全局搜索。
• 按 ~ 调出控制台。
• 按 Esc 关闭任何弹窗。

8. 带署名的引用

设计不只是外观和感觉，设计是它如何运作。 史蒂夫·乔布斯

9. 学术脚注

正文中带有 Transformer 原始论文的引用²。点击脚注编号会立即跳转到页面底部的脚注栏，点击 ↩ 返回图标即可精确回到阅读位置。