KaTeX 数学渲染实战3 分钟跑通 5 个官方扩展【免费下载链接】KaTeXFast math typesetting for the web.项目地址: https://gitcode.com/GitHub_Trending/ka/KaTeX 网页上写不出来的那个公式你一定遇到过这种情况技术博客要加一个分数搜出来的方案第一个是 MathJax老牌公式引擎。它功能多但首屏加载慢页面排版还会跳。你真正需要的是 KaTeX 数学渲染——一个面向网页的轻量排版库。传进去 LaTeX 记号用纯文本写公式的方式拿回来渲染好的 HTML快到无感。核心只负责一条一条地渲染整页自动渲染、化学方程式这类常见需求官方仓库里有一套扩展帮你接上。⚡ 三分钟跑通第一个公式head 里放两行引用正文一行渲染公式就出来了。脚本来自 CDN放在网络上由浏览器直接取用本地不用装任何东西link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/katex.min.css script srchttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/katex.min.js/script script // 把一条公式渲染进指定 div katex.render(x^2 y^2 z^2, document.getElementById(math)); /script div idmath/div存成 index.html 用浏览器打开不需要构建工具。跑通之后你会看到指定位置出现数学字体的 x² y² z²上标 2 稳稳悬在右上方不再是干巴巴的一行文字。 4 个官方扩展各管一段事扩展都放在 contrib/ 目录里按需取用不需要的别引。下面 4 个是实际项目里最常用的。引入 Auto-render告别手动逐条渲染核心 render() 只渲染你指定的那一条公式页面里有几十条时手写循环很痛苦。Auto-render自动渲染扩展按分隔符扫描页面文本把公式原地渲染出来。分隔符可配置默认认 $…$ 和 $$…$$可限定渲染范围跳过无关区域能忽略特定标签和类名script srchttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/contrib/auto-render.min.js/script script renderMathInElement(document.body); /script渲染效果参考仓库测试用例的截图加载 MHChem化学方程式带下标渲染Auto-render 解决的是多可公式一旦涉及化学这种特殊领域核心语法就不够用了。MHChem 扩展实现了 \ce 和 \pu 两个命令语法兼容 LaTeX 的 mhchem 宏包。支持化学方程式与同位素写法\pu 表示物理单位兼容 mhchem 宏包语法script defer srchttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/contrib/mhchem.min.js/script输入 \ce{2H2 O2 - 2H2O}得到下标和反应箭头都正确的标准方程式。接入 Copy-tex复制即得 LaTeX 源码公式能显示了可你想把它带走呢直接复制渲染结果剪贴板里是一堆乱码般的字符。Copy-tex 接管复制事件复制公式后剪贴板的文本内容变成带分隔符的 LaTeX 源码HTML 内容不受影响。内联与块级公式默认用不同分隔符只选中部分公式也会复制整条分隔符可在源码 copyDelimiters 里改script srchttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/contrib/copy-tex.min.js/script复制一条公式粘进笔记或聊天框得到的是能直接再编辑的 LaTeX 代码。加载 Mathtex-script-typeMathJax 老页面不改内容前面三个都是新接入的场景。如果你要迁移老页面还得处理 MathJax 的惯例把公式写进 script 标签并声明 typemath/tex。这个扩展就是识别这种标签并用 KaTeX 渲染老内容一行不用改。只需追加一行扩展脚本标签里写公式页面照常渲染存量内容零改动script defer srchttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/contrib/mathtex-script-type.min.js/script script typemath/texx\sqrt{1-x^2}/script加上扩展后这些标签里的内容自动变成带根号和上标的公式。另外还有一个 render-a11y-string 扩展把公式转成屏幕阅读器读屏软件能念出来的文本做无障碍时很有用。⚠️ 我踩过的坑和解法\ce 加载了却报未定义问题mhchem 引入后\ce 依然提示命令未定义。 原因脚本顺序错了。扩展必须在核心之后、auto-render 之前执行defer 属性写法不一致会让执行顺序失控。 解法保持 核心 → mhchem → auto-render 的顺序三者的 defer 属性保持一致。公式出来了字体却是默认衬线体问题公式显示正常但看起来像系统默认字体。 原因katex.min.css 没引或页面缓存了旧版 CSS 和新版 JS 不配套。 解法CSS 和 JS 锁定同一个版本号硬刷新一次清掉缓存。长页面公式多Auto-render 卡一下问题打开长文档自动渲染时页面会顿一顿。 原因默认递归扫描整个元素的所有文本节点代码块、评论区都在扫描范围内。 解法传入具体容器限定范围用 ignoredTags 和 ignoredClasses 排除不需要渲染的标签。 常用链接API 参考查渲染参数Auto-render 文档分隔符与忽略选项支持的命令清单查哪些命令可用扩展源码目录读 5 个扩展实现贡献指南动手写自己的扩展 写在最后下次网页要上公式第一步已经明确引核心加一行 auto-render三分钟内出第一版。先把示例页那条公式跑通再按需求挑扩展。从一行纯文本到数学排版的距离比你想象的近。【免费下载链接】KaTeXFast math typesetting for the web.项目地址: https://gitcode.com/GitHub_Trending/ka/KaTeX创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考