跳转到内容

KaTeX 渲染

1. 组件定位

KaTeX 是一款专为 Web 设计的、快速且易于使用的 LaTeX 数学公式渲染引擎。相比于老牌的 MathJax，KaTeX 牺牲了极少部分的边缘语法兼容性，换取了 无与伦比的同步解析与页面加载速度，是目前各类 Markdown 博客和笔记软件（如 Obsidian 原生环境）渲染公式的首选。

2. 基础环境接入 (浏览器原生模式)

2.1. 挂载 CDN 依赖

在 HTML 的 <head> 中引入核心的样式表和解析脚本：

<!-- 加载核心排版字体与样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css">
<!-- 延迟加载核心解析器 -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js"></script>

2.2. API 动态渲染调用

使用 katex.render(表达式字符串, DOM元素, [配置对象]) 将公式直接绘制到页面上。

<div id="math-container"></div>

<script>
    // 渲染一元二次方程求根公式
    katex.render(
        "x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}",
        document.getElementById("math-container"),
        {
            throwOnError: false // 遇到语法错误时不抛出异常，而是将错误公式标红显示
        }
    );
</script>

3. 拓展选型对比

KaTeX：主打 极致性能，服务端渲染（SSR）友好，语法覆盖率对于绝大多数学术场景已足够。
MathJax：主打 全面兼容与无障碍性 (a11y)。如果你需要极高难度的老旧 LaTeX 宏包支持，或者需要支持右键导出 MathML，则退至选择 MathJax。

4. 参考资料