共计 1854 个字符，预计需要花费 5 分钟才能阅读完成。

1. 背景痛点

开发需要同时对接多个 AI 平台（如 DeepSeek、豆包、ChatGPT、Claude）的应用时，数学公式的渲染成为一个棘手问题。不同平台返回的公式格式各异，导致前端显示不一致甚至解析失败。

• 平台差异：DeepSeek 偏好 MathML，ChatGPT 返回纯文本 LaTeX，Claude 有时会混合 Markdown 语法
• 显示兼容：移动端 WebView 与桌面浏览器对 SVG 支持程度不同，字号渲染存在差异
• 复杂公式：涉及积分符号、化学方程式等特殊字符时，各平台转义规则不统一

2. 技术方案

2.1 统一 LaTeX 语法层

设计中间表示层，规定所有公式必须转换为标准 LaTeX 语法：

• 基本算术：$E=mc^2$ → 保留原样
• 矩阵运算：强制使用 \begin{matrix} 环境
• 化学式：统一为 \ce{...} 宏包格式

2.2 平台特性检测

运行时自动识别来源平台：

1. 通过 API 响应头 X-Platform 字段判断
2. 无标识时采用正则匹配特征片段
3. 维护平台指纹规则库实时更新

2.3 AST 转换引擎

核心处理流程：

1. 原始文本 → 语法分析 → 平台特定 AST
2. 平台 AST → 统一 LaTeX AST
3. LaTeX AST → 目标输出格式（SVG/PNG）

3. 代码实现

3.1 API 封装示例

class AIPlatform:
    """统一接口封装"""
    @staticmethod
    def normalize_formula(raw: str) -> str:
        # 移除平台特有前缀
        if raw.startswith('$$$'):  # DeepSeek 标记
            return raw[3:].strip()
        # Claude 的 Markdown 混合处理
        return re.sub(r'\\\[.*?\\\]', '', raw) 

3.2 LaTeX 预处理

def sanitize_latex(text: str) -> str:
    """安全处理与语法修正"""
    # 替换危险命令
    banned = ['\\input', '\\include']
    for cmd in banned:
        text = text.replace(cmd, '')

    # 修复常见平台差异
    return (text
            .replace('\\(', '$(')  # 豆包特有语法
            .replace('\\mathbb{R}', '\\bf{R}'))  # Claude 兼容

3.3 双模式输出

class FormulaRenderer:
    """根据设备能力自动选择渲染模式"""
    def render(self, latex: str) -> str:
        if self._is_mobile():
            return self._generate_png(latex)
        return self._generate_svg(latex)

    def _generate_svg(self, latex: str) -> str:
        # 使用 mathjax-node 生成 SVG
        ...

4. 性能优化

4.1 缓存设计

采用三级缓存策略：

1. 内存缓存：LRU 缓存最近 100 个公式
2. 磁盘缓存：SQLite 存储已渲染结果
3. CDN 预热：高频公式预生成静态资源

4.2 并行渲染

Web 端性能对比（Chrome 120）：

4.3 移动端优化

内存占用压测数据（Android 中端机）：

• PNG 模式：峰值内存 ≤ 30MB
• SVG 模式：需注意 DOM 节点数 >500 时卡顿

5. 避坑指南

5.1 特殊字符处理

各平台差异举例：

5.2 字体回退方案

推荐字体栈：

.formula {font-family: "Latin Modern Math", "STIX", "Cambria Math", serif;}

5.3 安全防护

XSS 过滤要点：

1. 禁用 \\newcommand 等动态定义
2. 正则过滤 HTML 标签<script.*?>
3. CSP 设置script-src 'self'

6. 延伸思考

值得深入探索的方向：

1. 实时预览：如何实现类似 Overleaf 的编辑体验？需考虑：
2. 防抖阈值设置（建议 300ms）

3. 增量渲染优化

4. 降级方案：针对 IE11 等老旧浏览器：

5. 图片模式作为兜底

6. 提前编译 wasm 版本 mathjax

7. 监控体系：公式识别质量监控：

8. 建立常见错误模式库
9. 客户端上报渲染失败日志

在具体实施时，建议先针对自身业务场景中最频繁出现的公式类型（如数学推导或化学方程式）进行针对性优化，再逐步扩展到其他领域。不同平台对特定学科符号的支持程度也存在差异，需要在实际测试中持续调整兼容策略。