代码、图表与富内容兼容性测试

这篇文章集中验证代码、图表、公式和富内容组件。它使用宽版文章布局，但所有内容仍必须留在文章页面容器内；超长代码、公式和图表只能在自己的区域中滚动或缩放。

行内代码#

普通段落里的 pnpm.cmd build、src/content.config.ts 与 document.documentElement.classList.contains("dark") 应使用紧凑的行内代码样式，不能继承代码块的行号、固定宽度或整块背景。

TypeScript：标题、行号与高亮#

1
interface ArticleImage {
2
  src: string;
3
  alt: string;
4
  width?: number;
5
  height?: number;
6
}
7

8
export function normalizeArticleImage(image: ArticleImage) {
9
  return {
10
    ...image,
11
    loading: image.width && image.width > 1200 ? "lazy" : "eager",
12
    decoding: "async",
13
  } as const;
14
}

高亮行、插入标记、代码标题、复制按钮和行号不能互相遮挡，键盘焦点也必须保持清晰。

多语言代码块#

Python#

1
from dataclasses import dataclass
2

3

4
@dataclass(frozen=True)
5
class Viewport:
6
    width: int
7
    theme: str
8

9

10
def fits_article(viewport: Viewport, content_width: int) -> bool:
11
    return content_width <= viewport.width
12

13

14
print(fits_article(Viewport(width=1024, theme="pink"), content_width=960))

Shell#

1
pnpm.cmd check
2
pnpm.cmd lint
3
pnpm.cmd build

JSON 与 YAML#

1
{
2
  "viewports": [1024, 1280, 1440, 1920],
3
  "themes": ["blue", "pink"],
4
  "mustNotOverflow": true
5
}

1
title: 代码与富内容兼容性测试
2
published: 2026-07-21
3
draft: false
4
tags:
5
  - Mermaid
6
  - KaTeX

CSS 设计令牌#

1
.article-content {
2
  color: var(--article-body);
3
  overflow-wrap: anywhere;
4

5
  :not(pre) > code {
6
    color: var(--article-inline-code-text);
7
    background: var(--article-inline-code-bg);
8
    border: 1px solid var(--article-border);
9
  }
10
}

超长代码与 Diff#

下面这一行故意保持较长，用来确认代码框内部拥有自己的横向滚动区域：

1
const compatibilityEndpoint = "https://example.com/api/articles/compatibility?viewport=1024&theme=pink&language=zh-CN&feature=an-intentionally-long-code-line-that-must-scroll-inside-the-code-frame-only";

1
.article-content img { width: 100%; height: 420px; object-fit: cover; }
2
.article-content img { max-inline-size: 100%; block-size: auto; }
3
.article-content figure { max-inline-size: 100%; }
4
.article-content pre { overflow: visible; }
5
.article-content pre { overflow-x: auto; }

折叠代码#

较长代码可以折叠显示。预览行、展开按钮、复制按钮和滚动位置需要互不冲突。

1
type Theme = "blue" | "pink";
2

3
interface ArticleTestCase {
4
  viewport: number;
5
  theme: Theme;
6
  expectedOverflow: boolean;
7
}
8

9
const viewports = [1024, 1280, 1440, 1920];
9 collapsed lines
10
const themes: Theme[] = ["blue", "pink"];
11
const articleTestMatrix: ArticleTestCase[] = [];
12

13
for (const viewport of viewports) {
14
  for (const theme of themes) {
15
    articleTestMatrix.push({
16
      viewport,
17
      theme,
18
      expectedOverflow: false,
19
    });
20
  }
21
}
22

23
export function assertArticleLayout(testCase: ArticleTestCase): void {
24
  if (testCase.expectedOverflow) {
25
    throw new Error(`Unexpected overflow at ${testCase.viewport}px`);
26
  }
27
}

Mermaid 图表#

流程图需要在文章内容区内缩放或独立滚动。主题切换和 Swup 页面替换后，图表应重新获得正确配色，但不能被重复初始化。

SCENE GRAPH流程图

SCENE GRAPH时序图

数学与化学公式#

行内公式 $E = mc^2$ 应与中文基线自然对齐。块级公式过宽时，只允许公式容器滚动：

\frac{1}{n}\sum_{i=1}^{n}(x_i-\bar{x})^2 = \frac{1}{n}\sum_{i=1}^{n}x_i^2-\bar{x}^2

下面的矩阵用于检查宽公式：

\begin{bmatrix} a_{11} & a_{12} & a_{13} & a_{14} \\ a_{21} & a_{22} & a_{23} & a_{24} \\ a_{31} & a_{32} & a_{33} & a_{34} \end{bmatrix} \begin{bmatrix} x_1 \\ x_2 \\ x_3 \\ x_4 \end{bmatrix} = \begin{bmatrix} b_1 \\ b_2 \\ b_3 \end{bmatrix}

化学式扩展测试： $\ce{CO2 + C -> 2 CO}$ 。

提示框与 Directive#

普通说明

提示框可以包含粗体、inline code 和链接，颜色必须来自当前主题。

建议

代码、宽表格、图表和公式只能在自己的容器内处理溢出。

可折叠警告

展开和收起后，摘要文字、图标和焦点状态都应正常。

Directive 形式的重点

这段内容验证 remark-directive 到提示组件的转换，确保作者可以使用结构化语法表达重点。

原生折叠内容#

展开富内容检查清单

代码只在自身内部横向滚动。
图表、公式和提示框不会撑破页面。
键盘可以操作复制、折叠与链接控件。
Swup 导航后交互不会重复绑定。

最小 MDX 表达式#

MDX 表达式已成功渲染

这段结构不依赖外部组件或远程服务，只用于确认 .mdx 文件、JSX 语义元素和最小表达式可以通过生产构建。

验收结论#

如果代码标题、行号、高亮、diff、复制、折叠和横向滚动互不冲突，Mermaid、公式、提示框、原生折叠与 MDX 在主题切换和页面导航后仍然可用，这一页的富内容验证就算通过。