Angular 16中Katex与ngx-markdown渲染分隔符冲突问题

问题根源 #

你添加的自定义分隔符（单$、未转义的\(/\[）和普通文本中的括号、美元符号高度重合，导致KaTeX把非公式内容误判为公式渲染；同时重复的分隔符配置也会干扰匹配逻辑。

具体解决方案 #

1. 精简并修正KaTeX分隔符配置 #

删除易冲突的冗余分隔符，只保留不会与普通文本重叠的严格分隔符：

// 修改后的katexOptions分隔符配置
delimiters: [
  {left: "$$", right: "$$", display: true}, // 块级公式
  {left: "\\(", right: "\\)", display: false}, // 行内公式（带转义反斜杠）
  {left: "\\[", right: "\\]", display: true}, // 块级公式（带转义反斜杠）
  {left: "\\begin{equation}", right: "\\end{equation}", display: true},
  {left: "\\begin{align}", right: "\\end{align}", display: true},
  {left: "\\begin{alignat}", right: "\\end{alignat}", display: true},
  {left: "\\begin{gather}", right: "\\end{gather}", display: true},
  {left: "\\begin{CD}", right: "\\end{CD}", display: true},
]

• 移除单$分隔符：普通文本中的美元符号（比如价格）会触发误匹配
• 移除未转义的\(/\[：JS字符串中"\("实际就是(，和普通括号完全重合，必然导致误判
• 保留带双重转义的\\(/\\[：普通文本中不会出现这种带反斜杠的括号，只有公式场景才会使用

2. 开启KaTeX严格匹配模式 #

在optionsKatex中添加严格模式配置，过滤不符合LaTeX语法的误匹配内容：

// 组件中的katexOptions配置
optionsKatex = {
  delimiters: [/* 上面的精简配置 */],
  strict: "ignore", // 忽略不符合LaTeX语法的内容，避免渲染异常
  trust: false, // 禁用不安全的LaTeX命令，同时减少误匹配概率
};

3. 规范后端LLM输出格式 #

要求LLM返回的Markdown内容遵循以下规则：

• 行内公式必须用\(...\)包裹，块级公式用$$...$$或\[...\]包裹
• 普通文本中的括号()、方括号[]、美元符号$不要添加反斜杠
• 避免使用单$作为公式分隔符

4. 前端文本预处理（可选，用于兼容旧数据） #

如果后端无法修改输出格式，可以在组件中对返回内容进行预处理，区分普通文本和公式：

// 组件中预处理mensagem.content的示例
processContent(content: string): string {
  // 将普通文本中的单$转义为\$，避免被KaTeX识别
  content = content.replace(/(?<!\\)\$/g, "\\$");
  // 将普通文本中未转义的(/)替换为\(\)（仅当确定不是公式时，需根据实际场景调整正则）
  content = content.replace(/(?<!\\)\((?!.*\\))/g, "\\(");
  content = content.replace(/(?<!\\)\)(?<!\\\()/g, "\\)");
  return content;
}

在模板中使用预处理后的内容：

<markdown lineNumbers katex [katexOptions]="optionsKatex" clipboard [clipboardButtonTemplate]="buttonTemplate">
  {{ processContent(mensagem.content) }}
</markdown>

内容的提问来源于stack exchange，提问作者CH97