这篇文章集中验证代码、图表、公式和富内容组件。它使用独立白色阅读布局，所有内容必须留在文章页面容器内；超长代码、公式和图表只能在自己的区域中滚动或缩放。
行内代码
普通段落里的 pnpm.cmd build、src/content.config.ts 与 document.documentElement.classList.contains("dark") 应使用紧凑的行内代码样式，不能继承代码块的行号、固定宽度或整块背景。
TypeScript：标题、行号与高亮
interface ArticleImage {
src: string;
alt: string;
width?: number;
height?: number;
}
export function normalizeArticleImage(image: ArticleImage) {
return {
...image,
loading: image.width && image.width > 1200 ? "lazy" : "eager",
decoding: "async",
} as const;
}高亮行、插入标记、代码标题、复制按钮和行号不能互相遮挡，键盘焦点也必须保持清晰。
多语言代码块
Python
from dataclasses import dataclass
@dataclass(frozen=True)
class Viewport:
width: int
theme: str
def fits_article(viewport: Viewport, content_width: int) -> bool:
return content_width <= viewport.width
print(fits_article(Viewport(width=1024, theme="pink"), content_width=960))Shell
pnpm.cmd check
pnpm.cmd lint
pnpm.cmd buildJSON 与 YAML
{
"viewports": [1024, 1280, 1440, 1920],
"themes": ["blue", "pink"],
"mustNotOverflow": true
}title: 代码与富内容兼容性测试
published: 2026-07-21
draft: false
tags:
- Mermaid
- KaTeXCSS 设计令牌
.article-content {
color: var(--article-body);
overflow-wrap: anywhere;
:not(pre) > code {
color: var(--article-inline-code-text);
background: var(--article-inline-code-bg);
border: 1px solid var(--article-border);
}
}超长代码与 Diff
下面这一行故意保持较长，用来确认代码框内部拥有自己的横向滚动区域：
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";- .article-content img { width: 100%; height: 420px; object-fit: cover; }
+ .article-content img { max-inline-size: 100%; block-size: auto; }
+ .article-content figure { max-inline-size: 100%; }
- .article-content pre { overflow: visible; }
+ .article-content pre { overflow-x: auto; }折叠代码
较长代码可以折叠显示。预览行、展开按钮、复制按钮和滚动位置需要互不冲突。
type Theme = "blue" | "pink";
interface ArticleTestCase {
viewport: number;
theme: Theme;
expectedOverflow: boolean;
}
const viewports = [1024, 1280, 1440, 1920];
展开 9 行代码
const themes: Theme[] = ["blue", "pink"];
const articleTestMatrix: ArticleTestCase[] = [];
for (const viewport of viewports) {
for (const theme of themes) {
articleTestMatrix.push({
viewport,
theme,
expectedOverflow: false,
});
}
}
export function assertArticleLayout(testCase: ArticleTestCase): void {
if (testCase.expectedOverflow) {
throw new Error(`Unexpected overflow at ${testCase.viewport}px`);
}
}Mermaid 图表
流程图需要在文章内容区内缩放或独立滚动。在独立阅读页刷新、完整导航及历史返回后，图表应保持固定阅读配色，且不能被重复初始化。
数学与化学公式
行内公式 应与中文基线自然对齐。块级公式过宽时，只允许公式容器滚动：
下面的矩阵用于检查宽公式：
化学式扩展测试：。
提示框与 Directive
普通说明
提示框可以包含粗体、inline code 和链接，颜色必须来自文章富内容令牌。
建议
代码、宽表格、图表和公式只能在自己的容器内处理溢出。
可折叠警告
展开和收起后，摘要文字、图标和焦点状态都应正常。
Directive 形式的重点
这段内容验证 remark-directive 到提示组件的转换，确保作者可以使用结构化语法表达重点。
原生折叠内容
展开富内容检查清单
- 代码只在自身内部横向滚动。
- 图表、公式和提示框不会撑破页面。
- 键盘可以操作复制、折叠与链接控件。
- Swup 导航后交互不会重复绑定。
最小 MDX 表达式
MDX 表达式已成功渲染
这段结构不依赖外部组件或远程服务，只用于确认 .mdx 文件、JSX 语义元素和最小表达式可以通过生产构建。
验收结论
如果代码标题、行号、高亮、diff、复制、折叠和横向滚动互不冲突，Mermaid、公式、提示框、原生折叠与 MDX 在刷新、完整导航及前进后退后仍然可用，这一页的富内容验证就算通过。