│ └─ renderLatexToken(token) → KaTeX HTML │ ├─ token.type === 'math_inline'（或混合 token 数组） │ wrapperTag = 'span'，wrapperClass = 'inline-latex-content' │ └─ renderLatexToken(token) → KaTeX HTML │ ├─ token.type === 'inline'（含 children） │ └─ renderInlineChildren(token.children) │ ├─ math_inline → renderLatexToken（递归） │ ├─ text → escapeHtml │ ├─ softbreak → '\n' │ ├─ hardbreak → '
' │ ├─ code_inline → '...' │ ├─ strong_open/close → '' / '' │ ├─ em_open/close → '' / '' │ ├─ s_open/close → '' / '' │ ├─ link_open/close → '...' │ ├─ image → '' │ └─ 未知类型 → escapeHtml(token.content) │ ├─ token.type === 'paragraph_open/close' → '

' / '

' └─ token.type === 'text' / 其他 → escapeHtml(token.content) ``` ### displayMode 判断规则 ```typescript // renderLatexToken 内部 const displayMode = token.type === 'math_block' || token.meta?.displayMode === true; // math_inline 也可通过 meta.displayMode=true 强制块级渲染 ``` ## 基础用法：块级公式 ```vue ``` ## 行内公式 `math_inline` 类型，包装为 `span.inline-latex-content`，嵌入文字流中渲染： ```vue ``` ## 混合 inline token（文字 + 公式） 传入 `inline` token 并带 `children` 时，`renderInlineChildren` 逐一处理文本、公式、标记： ## 积分与根号 ## 矩阵 ## 对齐环境 ## 流式渲染防闪烁 组件针对流式 Markdown 输入进行了优化：**100ms throttle**（leading + trailing）避免每字符重渲染，**`completeLatexContent`** 在每次渲染前自动补全不完整语法： ```vue ``` ## 语法自动补全（completeLatexContent） 在每次调用 KaTeX 前，组件先通过 `completeLatexContent` 修复不完整语法，处理顺序为： | 步骤 | 处理内容 | 示例 | | ---- | --------------------------------------------------------------------- | --------------------------------------------- | | 0 | 不完整 `\begin{env` → 猜测环境名补全 `\begin{env}\end{env}` | `\begin{pma` → `\begin{pmatrix}\end{pmatrix}` | | 0.1 | 不完整 `\end{env` → 猜测环境名补全 | `\end{alig` → `\end{aligned}` | | 0.2 | 末尾不完整命令 `\begi` → 若匹配已知命令前缀则移除，完整命令则补全参数 | `\frac` → `\frac{}{}` | | 1 | 未闭合 `{}` → 补全缺失的 `}` | `\frac{a}{b` → `\frac{a}{b}` | | 2 | 未闭合 `[]` → 补全缺失的 `]` | `\sqrt[3` → `\sqrt[3]` | | 3 | 双参数命令缺第二个参数 → 追加 `{}` | `\frac{a}` → `\frac{a}{}` | | 4 | `\begin{env}` 无对应 `\end{env}` → 追加 `\end{env}` | `\begin{matrix}...` → `...\end{matrix}` | **可猜测的环境名**（`COMMON_ENVS`）：`aligned`、`align`、`equation`、`gather`、`matrix`、`pmatrix`、`bmatrix`、`vmatrix`、`cases`、`array`、`split`、`multline` **双参数命令**（`TWO_ARG_COMMANDS`）：`frac`、`dfrac`、`tfrac`、`binom`、`cfrac`、`overset`、`underset` 等 **单参数命令**（`ONE_ARG_COMMANDS`）：`sqrt`、`text`、`mathbf`、`hat`、`vec`、`overline`、`boxed` 等 ## 渐进式降级重试（tryRenderKatex） 补全后仍渲染失败时，最多重试 5 次，每次尝试两种裁剪策略： ``` 尝试 completeLatexContent(content) → KaTeX 渲染 失败 → 策略 1：移除末尾不完整命令（正则 /\\[a-zA-Z]+(\{[^{}]*\})*\s*$/） 策略 2：移除未闭合 {（正则 /\{[^{}]*$/） 若仍失败 → 返回 null → 渲染 原始文本（HTML 转义） ``` > **错误静默**：KaTeX 以 `errorColor: '#fff'`（白色）渲染错误文本，错误不可见。若检测到 HTML 中含 `katex-error` 类或 `color:#cc0000`，也视为渲染失败，降级为 `katex-loading` 显示原始文本。 ## API ### Props | 属性名 | 类型 | 必填 | 说明 | | ------ | --------- | ---- | ------------------------------------------------------------------------------------------------------------------------ | | token | `Token[]` | ✓ | markdown-it Token 数组；支持 `math_block`、`math_inline`、`inline`（含 children）、`paragraph_open/close`、`text` 等类型 | ### Token 结构 ```typescript // math_block / math_inline { type: 'math_block' | 'math_inline'; content: string; // LaTeX 公式字符串 meta?: { displayMode?: boolean }; // true → 块级渲染（math_inline 可用此强制块级） } // inline（含行内标记 + 公式混排） { type: 'inline'; children: Token[]; // 子 token 列表 } ``` ## 样式说明 | 类名 | 标签 | 作用 | | ----------------------- | ------ | ------------------------------------------------------------------------------------------- | | `.block-latex-content` | `div` | 单一 `math_block` 时的外层，`text-align: center`，`overflow: auto hidden`，`margin: 16px 0` | | `.inline-latex-content` | `span` | 混合/行内时的外层，`display: inline`，`vertical-align: baseline` | | `.block-latex-wrapper` | `div` | 每个 `math_block` token 的包装，`text-align: center`，`margin: 16px 0` | | `.block-katex` | `span` | 块级 KaTeX 输出 | | `.inline-katex` | `span` | 行内 KaTeX 输出 | | `.katex-loading` | `span` | 渲染失败降级态，斜体灰色显示原始 LaTeX 文本 | ## 关联组件 - [MarkdownContent](/components/rendering/markdown-content) — 数学公式 token 的来源与挂载