Vue3 项目中优雅地处理 Markdown 数学公式渲染

问题背景

在 Vue3 项目中使用 markdown-it 和 KaTeX 渲染数学公式时，遇到了一些特殊字符转义和解析的问题。特别是在处理 LaTeX 公式时，常见的 \(...\) 和 \[...\] 语法无法正确渲染。

踩坑过程

1. 初始实现的问题

• markdown-it 默认的转义规则会干扰 LaTeX 语法
• KaTeX 插件无法正确识别被转义后的公式
• 正则表达式处理特殊字符时出现错误

2. 常见错误表现

• \(...\) 被错误转义为 (...)
• 块级公式 \[...\] 无法正确识别
• 公式渲染不完整或完全失败

3. 解决思路

1. 自定义 markdown-it 规则
2. 分离行内公式和块级公式的处理逻辑
3. 使用字符串匹配替代复杂的正则表达式

最终解决方案

1. 配置 markdown-it 和 KaTeX

const md = new MarkdownIt({
  html: true,
  breaks: true,
  linkify: true,
}).use(mk, {
  throwOnError: false,
  errorColor: '#cc0000',
})

2. 处理行内公式和块级公式

• 使用 inline.ruler 处理行内公式
• 使用 block.ruler 处理块级公式
• 统一的分隔符处理机制

3. 关键技术点

• 在 escape 规则之前注册自定义规则
• 使用简单的字符串匹配提高可靠性
• 保持原始内容的完整性

最佳实践建议

1. 优先使用 $...$ 语法作为行内公式
2. 使用 $$...$$ 作为块级公式
3. 需要兼容 LaTeX 原生语法时，确保正确处理 \(...\) 和 \[...\]

总结与思考

1. 在处理特殊语法时，应该优先考虑字符串处理而非复杂的正则表达式
2. 自定义规则时要注意规则的执行顺序
3. 错误处理和降级方案的重要性

这篇文章可以帮助其他开发者避免类似的问题，同时提供了一个可靠的解决方案。你觉得这个大纲怎么样？需要我详细展开某些部分吗？