看起来你遇到的核心问题是：后端返回的裸LaTeX/数学表达式没有被KaTeX识别——因为KaTeX的auto-render默认只认带分隔符（比如$、$$）的内容，而你的后端直接返回了没有包裹的\pm、b^2-4ac这类代码，自然没法自动渲染。我来给你一步步解决这个问题：

核心思路 #

我们需要做三件事：

1. 预处理后端返回的文本，给所有裸数学表达式套上KaTeX能识别的$（行内公式）或$$（块级公式）分隔符
2. 调整marked.js的配置，避免它把LaTeX的特殊字符（比如^、_）转成Markdown格式（比如上标<sup>）
3. 优化KaTeX的渲染配置，确保能正确识别我们处理后的内容

具体代码修改 #

1. 添加数学表达式预处理函数 #

这个函数会自动识别文本中的裸数学内容（比如\pm、b^2-4ac、>），给它们套上$分隔符，同时处理HTML实体和常见的LaTeX简写：

function preprocessMathText(text) {
  // 先把HTML实体转成原生字符（比如把>转成>）
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = text;
  text = tempDiv.textContent || tempDiv.innerText || '';

  // 替换常见的运算符简写为LaTeX命令（比如>=转成\ge，<=转成\le）
  text = text.replace(/>=/g, '\\ge');
  text = text.replace(/<=/g, '\\le');

  // 匹配连续的数学表达式（包含字母、数字、^、_、\、运算符等）
  const mathExprRegex = /([a-zA-Z0-9\^_\\+\-*/=<>()\s]+)/g;
  text = text.replace(mathExprRegex, (match) => {
    // 过滤掉纯文本（比如普通句子），只处理包含数学特征的内容
    const hasMathChars = match.includes('^') || match.includes('_') || match.includes('\\') || 
                         match.match(/[\+\-\*/=<>]/) || match.match(/\\[a-z]+/i);
    if (hasMathChars && !match.includes(' ') && !match.includes('\n')) {
      return `$${match}$`;
    } else if (hasMathChars) {
      // 处理带空格的连续数学内容（比如"b^2 - 4ac > 0"）
      return `$${match.trim()}$`;
    }
    return match;
  });

  return text;
}

2. 调整marked.js的配置，避免破坏LaTeX语法 #

marked默认的GFM语法会把^当成上标，这会让KaTeX无法处理。我们要禁用这个特性，或者让marked忽略LaTeX的特殊字符：

// 在页面初始化时配置marked
marked.setOptions({
  gfm: false, // 禁用GFM的上标、下标等特性，避免和LaTeX冲突
  breaks: true, // 保留换行符
  sanitize: false, // 假设后端返回的内容是安全的，若有风险可开启 sanitize
  smartypants: false // 关闭自动替换引号、破折号等，避免干扰LaTeX
});

// 如果你需要保留其他GFM特性（比如表格），可以用扩展单独禁用上标：
// const noSuperscript = {
//   name: 'noSuperscript',
//   level: 'inline',
//   start(src) { return src.indexOf('^'); },
//   tokenizer(src) {
//     const match = /^\^/.exec(src);
//     if (match) return { type: 'text', raw: match[0], text: match[0] };
//   },
//   renderer(token) { return token.text; }
// };
// marked.use({ extensions: [noSuperscript] });

3. 修改消息渲染逻辑，整合预处理与渲染 #

更新appendMessage函数，先预处理文本，再用marked解析，最后调用KaTeX渲染：

function appendMessage(text, from) {
  window.chatBuffer.push({ text, from });
  if (window.chatBuffer.length > 50) window.chatBuffer.shift();

  const wrap = document.createElement("div");
  wrap.className = `message ${from}`;

  const bubble = document.createElement("div");
  if (text.startsWith('Selected subject:') || text.startsWith('Welcome!')) {
    bubble.className = "subject-notification";
    bubble.textContent = text;
  } else {
    bubble.className = "bubble";
    if (from === "model") {
      // 1. 预处理数学文本，添加KaTeX分隔符
      const processedText = preprocessMathText(text);
      // 2. 用marked解析Markdown
      bubble.innerHTML = marked.parse(processedText);
      // 3. 渲染KaTeX公式（无需延迟0ms，DOM已存在）
      renderMath(bubble);
    } else {
      bubble.textContent = text;
    }
  }
  wrap.appendChild(bubble);
  messagesEl.appendChild(wrap);
  messagesEl.scrollTop = messagesEl.scrollHeight;
}

4. 优化KaTeX的渲染配置 #

确保renderMath函数的分隔符配置能覆盖我们的场景：

function renderMath(element) {
  if (window.renderMathInElement) {
    renderMathInElement(element, {
      delimiters: [
        {left: '$$', right: '$$', display: true}, // 块级公式
        {left: '$', right: '$', display: false},   // 行内公式
        {left: '\\[', right: '\\]', display: true},
        {left: '\\(', right: '\\)', display: false}
      ],
      throwOnError: false, // 忽略渲染错误，避免影响其他内容
      ignoredTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
      processEscapes: true, // 支持转义的$（比如\$会显示成$）
      output: 'html'
    });
  }
}

注意事项与优化 #

1. 正则表达式优化：预处理函数的正则可以根据你实际的数学场景调整，比如如果需要支持分数（\frac{a}{b}）、根号（\sqrt{x}），可以扩展正则的匹配规则
2. 块级公式支持：如果后端返回多行公式，你可以在预处理函数中识别换行，用$$包裹
3. 性能优化：如果聊天消息很多，可以考虑只对新添加的消息渲染KaTeX，避免重复渲染
4. 测试边缘情况：比如测试\sqrt{4} = 2、\frac{1}{2}、x_1 + x_2 = -b/a这类表达式，确保都能正确渲染

这样修改后，你的聊天组件应该就能自动识别所有数学表达式，用KaTeX渲染成美观的格式了 🎉