KaTeX 数学公式渲染插件完全指南5 个官方扩展按场景选对、配好【免费下载链接】KaTeXFast math typesetting for the web.项目地址: https://gitcode.com/GitHub_Trending/ka/KaTeX想让正文里的$公式自动渲染、复制公式时带回 LaTeX 源码、再写几个化学方程式KaTeX 的contrib/目录下有 5 个官方扩展各管一段。本文按场景讲清KaTeX 插件怎么选、数学公式渲染怎么配。 30 秒选型5 个官方 KaTeX 扩展速查表扩展适用场景一句话卖点引入文件auto-render正文散落公式扫描分隔符原位渲染katex/contrib/auto-rendercopy-tex复制已渲染公式剪贴板写入 LaTeX 源码katex/contrib/copy-texmhchem化学教育、方程式\ce/\pu兼容 mhchem 语法katex/contrib/mhchemmathtex-script-typeMathJax 旧页面识别typemath/tex脚本标签katex/contrib/mathtex-script-typerender-a11y-string无障碍、读屏生成屏幕阅读器可读文本katex/contrib/render-a11y-string只展示单个公式的话核心的katex.render()就够了按需加载扩展即可。✍️ 配置 auto-render让正文公式自动渲染用核心 API 时你得自己找每个公式的位置逐个调用katex.render。auto-render 在指定元素的文本节点里按分隔符找数学内容直接原位渲染并自动跳过pre、code等标签。配置 auto-render 时注意三点规则按列表顺序匹配启用$...$行内公式时$$规则必须写在$前面否则$$会被当成空公式ignoredTags、ignoredClasses可再限制扫描范围长文档建议把renderMathInElement的参数从document.body缩小到具体容器throwOnError: false让解析错误不中断页面错误交给errorCallback处理renderMathInElement(document.body, { delimiters: [ { left: $$, right: $$, display: true }, { left: $, right: $, display: false }, ], }); 复制公式保留 LaTeX 源码copy-tex选中复制渲染结果剪贴板里只有一堆 HTML贴到文档里就乱了。引入 copy-tex 后剪贴板的文本内容会变成带分隔符的 LaTeX 源码HTML 内容保持原样两边都能贴。两个细节默认行内用$...$、展示模式用$$...$$想换成\(...\)和\[...\]改源码里的copyDelimiters只选中公式的一部分时选区会自动扩展到整个公式script srckatex.min.js/script script srccontrib/copy-tex.min.js/script⚗️ 渲染化学方程式接入 KaTeX 渲染化学公式mhchem核心不认识\ce这类化学语法。mhchem 扩展补上了 LaTeX mhchem 包的\ce和\pu命令化学方程式可以直接写\ce{2H2 O2 - 2H2O}加载顺序有讲究mhchem 放在katex.js之后如果同时用 auto-render还要放在 auto-render 之前否则 auto-render 扫描时看不到\ce这个函数。script srckatex.min.js/script script srccontrib/mhchem.min.js/script script srccontrib/auto-render.min.js/script️ 生成读屏无障碍文本render-a11y-stringKaTeX 渲染出来的 DOM 是一堆定位过的 span读屏软件念出来是乱码。render-a11y-string 把解析树转成可读字符串\frac{1}{2}会变成 start fraction, 1, divided by, 2, end fraction逗号用来控制读屏停顿。这是实现 KaTeX 无障碍支持最直接的途径——它是纯函数你在 JS 里调用再把结果自己写入无障碍节点即可import renderA11yString from katex/contrib/render-a11y-string; renderA11yString(\\frac{1}{2}); // start fraction, 1, divided by, 2, end fraction 从 MathJax 迁移识别 math/tex 标签旧页面习惯把公式写在script typemath/tex里MathJax 的用法。引入 mathtex-script-type 后KaTeX 会直接处理这类脚本标签存量公式不用逐个改写script srccontrib/mathtex-script-type.min.js/script script typemath/texx\sqrt{1-x^2}/script 接入三步与常见坑锁版本核心与所有扩展保持同一版本本仓库当前为 0.18.2混用版本容易出现找不到函数的诡异问题排顺序katex最先mhchem在后auto-render最后——它要看到其他扩展注册完的函数才能正确扫描限范围给renderMathInElement传ignoredTags/ignoredClasses别把代码块里的$也渲染成公式其余小坑copy-tex 自 0.16 起没有配套 CSS 文件render-a11y-string 只返回字符串不会自动写进页面。 文档与贡献入口扩展 API 与参数docs/autorender.md、docs/api.md渲染选项全集docs/options.md版本升级记录docs/migration.md扩展源码都是 TypeScript写自己的扩展前先读 contrib/auto-render/ 了解挂钩方式贡献流程见 CONTRIBUTING.md选定扩展后把contrib/里对应子目录的构建产物拷进项目、照着 README 接上就可以开工了。【免费下载链接】KaTeXFast math typesetting for the web.项目地址: https://gitcode.com/GitHub_Trending/ka/KaTeX创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考