KaTeX 扩展实战教程5 个官方插件搞定 Web 数学排版【免费下载链接】KaTeXFast math typesetting for the web.项目地址: https://gitcode.com/GitHub_Trending/ka/KaTeXKaTeX 是快速 Web 数学排版库负责把 LaTeX 公式在浏览器里渲染成数学符号。围绕 KaTeX 扩展官方一共提供了 5 个插件全部在 contrib/ 目录各解决一个高频痛点正文里的公式不想逐个手写渲染调用 —— auto-render复制渲染好的公式想拿回 LaTeX 源码 —— copy-tex要渲染化学方程式或从 MathJax 站点迁移过来 —— mhchem、mathtex-script-type给视障用户准备屏幕阅读器朗读文本 —— render-a11y-string下面按场景逐个带你看每节只给最短可用的步骤。场景一让正文里的公式自己长出来auto-render用核心 API 时每段公式都要手动调用katex.render一篇几十条公式的文章会很累。auto-render 扩展替你干了这件事传一个容器元素它递归扫描里面的文本节点找到分隔符就原地渲染。两步接入自动渲染第一步在页面里引入 katex 主脚本和扩展脚本构建后位于 dist/扩展源码在 contrib/auto-render/第二步页面加载后触发一次扫描renderMathInElement(document.body);需要计算选项时建议监听DOMContentLoaded再调用完整 API 见 docs/autorender.md。默认分隔符和你以为的不一样默认生效的分隔符是$$...$$、\(...\)、\[...\]以及 equation、align、alignat、gather 四个环境。注意$...$默认是关掉的——官方代码里明确注释单个$容易和正文里的价格、货币符号冲突。想启用就自己在delimiters里声明renderMathInElement(document.body, { delimiters: [ {left: $$, right: $$, display: true}, {left: $, right: $, display: false} ] });限定渲染范围防止误伤代码块auto-render 默认跳过script、noscript、style、textarea、pre、code、option七类标签代码块里的$不会被误渲染。还要排除更多区域时用ignoredTags和ignoredClasses两个选项限定扫描范围长文档性能差时这也是最主要的调优手段。另外公式写错时默认行为是把错误打到控制台并保留原文页面不会白屏。场景二复制公式不再丢 LaTeX 源码copy-tex没装 copy-tex 时选中复制一段渲染好的公式剪贴板里只能得到零碎文字。装上它之后复制 KaTeX 渲染出的公式剪贴板的文本内容会变成带分隔符的 LaTeX 源码而 HTML 内容保持选中片段的原样。三个关键行为默认分隔符行内公式$...$独立公式$$...$$只选中公式的一部分时会自动扩展到整个公式——拿到的源码永远是完整的想换分隔符比如改成\(...\)和\[...\]改 contrib/copy-tex/copy-tex.ts 里的copyDelimiters即可它把渲染树反推回 TeX 的实现放在 contrib/copy-tex/katex2tex.ts想定制自己的复制逻辑可以直接基于它改。两个前提浏览器要支持 Clipboard API自 KaTeX 0.16.0 起该扩展没有对应的 CSS 文件只引一个 JS 就够了。场景三 化学公式与 MathJax 迁移两个专项三步引入 \ce 化学公式引入 mhchem 扩展脚本源码见 contrib/mhchem/mhchem.js放在head里位置必须在 katex.js 之后同时用 auto-render 时必须在 auto-render.js 之前之后\ce{2H2 O2 - 2H2O}就能渲染成规范的化学方程式\pu负责带单位的物理量。一个细节老版 mhchem 里的\cf已被弃用该扩展只支持\ce存量内容可以用宏把\cf映射到\ce。从 MathJax 迁移让 math/tex 标签继续工作老站点如果按 MathJax 的写法用 script 标签存公式不必改写模板——mathtex-script-type 扩展让 KaTeX 直接接管这些标签script typemath/texx\sqrt{1-x^2}/script引入 contrib/mathtex-script-type/ 里的扩展脚本即可这是替换 MathJax 成本最低的一步迁移时的其余注意事项见 docs/migration.md。场景四 ♿让屏幕阅读器念出公式render-a11y-string公式渲染得再漂亮屏幕阅读器读出来也是乱码。render-a11y-string 把公式解析树转成可朗读的描述文本输出质量分两档语义档\frac{1}{2}读作 start fraction, 1, divided by, 2, end fraction接近数学老师的口吻逐字符档f(x) x^2读作 f, left parenthesis, x, right parenthesis, equals, x, squared最短调用示例renderA11yString(\\frac{1}{2}) // - start fraction, 1, divided by, 2, end fraction它对边界很诚实array 环境、\xrightarrowxArrow、\href、tag、\includegraphics等节点在源码中标记为尚未实现遇到会直接抛错清单可在 contrib/render-a11y-string/render-a11y-string.ts 里核对。上线前先确认自己站点的公式范围输出里的逗号是刻意加的为了让朗读断句更清楚。⚠️ 避坑清单按这 5 条检查再上线版本对齐所有扩展与核心 KaTeX 用同一版本当前仓库为 0.18.2混版是报错首因加载顺序mhchem 在 katex 之后、auto-render 之前顺序错了化学公式不渲染defer 配套核心与扩展都用defer加快首屏去掉其中一个另一个也要去掉性能兜底大文档用ignoredTags/ignoredClasses限定扫描范围别让它扫整个 body错误降级核心渲染配throwOnError: false显示原始公式auto-render 配errorCallback出错不白屏下一步看三处就够docs/api.md 查 APIdocs/supported.md 查支持的命令docs/options.md 查全部选项。【免费下载链接】KaTeXFast math typesetting for the web.项目地址: https://gitcode.com/GitHub_Trending/ka/KaTeX创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
KaTeX 扩展实战教程：5 个官方插件搞定 Web 数学排版
KaTeX 扩展实战教程5 个官方插件搞定 Web 数学排版【免费下载链接】KaTeXFast math typesetting for the web.项目地址: https://gitcode.com/GitHub_Trending/ka/KaTeXKaTeX 是快速 Web 数学排版库负责把 LaTeX 公式在浏览器里渲染成数学符号。围绕 KaTeX 扩展官方一共提供了 5 个插件全部在 contrib/ 目录各解决一个高频痛点正文里的公式不想逐个手写渲染调用 —— auto-render复制渲染好的公式想拿回 LaTeX 源码 —— copy-tex要渲染化学方程式或从 MathJax 站点迁移过来 —— mhchem、mathtex-script-type给视障用户准备屏幕阅读器朗读文本 —— render-a11y-string下面按场景逐个带你看每节只给最短可用的步骤。场景一让正文里的公式自己长出来auto-render用核心 API 时每段公式都要手动调用katex.render一篇几十条公式的文章会很累。auto-render 扩展替你干了这件事传一个容器元素它递归扫描里面的文本节点找到分隔符就原地渲染。两步接入自动渲染第一步在页面里引入 katex 主脚本和扩展脚本构建后位于 dist/扩展源码在 contrib/auto-render/第二步页面加载后触发一次扫描renderMathInElement(document.body);需要计算选项时建议监听DOMContentLoaded再调用完整 API 见 docs/autorender.md。默认分隔符和你以为的不一样默认生效的分隔符是$$...$$、\(...\)、\[...\]以及 equation、align、alignat、gather 四个环境。注意$...$默认是关掉的——官方代码里明确注释单个$容易和正文里的价格、货币符号冲突。想启用就自己在delimiters里声明renderMathInElement(document.body, { delimiters: [ {left: $$, right: $$, display: true}, {left: $, right: $, display: false} ] });限定渲染范围防止误伤代码块auto-render 默认跳过script、noscript、style、textarea、pre、code、option七类标签代码块里的$不会被误渲染。还要排除更多区域时用ignoredTags和ignoredClasses两个选项限定扫描范围长文档性能差时这也是最主要的调优手段。另外公式写错时默认行为是把错误打到控制台并保留原文页面不会白屏。场景二复制公式不再丢 LaTeX 源码copy-tex没装 copy-tex 时选中复制一段渲染好的公式剪贴板里只能得到零碎文字。装上它之后复制 KaTeX 渲染出的公式剪贴板的文本内容会变成带分隔符的 LaTeX 源码而 HTML 内容保持选中片段的原样。三个关键行为默认分隔符行内公式$...$独立公式$$...$$只选中公式的一部分时会自动扩展到整个公式——拿到的源码永远是完整的想换分隔符比如改成\(...\)和\[...\]改 contrib/copy-tex/copy-tex.ts 里的copyDelimiters即可它把渲染树反推回 TeX 的实现放在 contrib/copy-tex/katex2tex.ts想定制自己的复制逻辑可以直接基于它改。两个前提浏览器要支持 Clipboard API自 KaTeX 0.16.0 起该扩展没有对应的 CSS 文件只引一个 JS 就够了。场景三 化学公式与 MathJax 迁移两个专项三步引入 \ce 化学公式引入 mhchem 扩展脚本源码见 contrib/mhchem/mhchem.js放在head里位置必须在 katex.js 之后同时用 auto-render 时必须在 auto-render.js 之前之后\ce{2H2 O2 - 2H2O}就能渲染成规范的化学方程式\pu负责带单位的物理量。一个细节老版 mhchem 里的\cf已被弃用该扩展只支持\ce存量内容可以用宏把\cf映射到\ce。从 MathJax 迁移让 math/tex 标签继续工作老站点如果按 MathJax 的写法用 script 标签存公式不必改写模板——mathtex-script-type 扩展让 KaTeX 直接接管这些标签script typemath/texx\sqrt{1-x^2}/script引入 contrib/mathtex-script-type/ 里的扩展脚本即可这是替换 MathJax 成本最低的一步迁移时的其余注意事项见 docs/migration.md。场景四 ♿让屏幕阅读器念出公式render-a11y-string公式渲染得再漂亮屏幕阅读器读出来也是乱码。render-a11y-string 把公式解析树转成可朗读的描述文本输出质量分两档语义档\frac{1}{2}读作 start fraction, 1, divided by, 2, end fraction接近数学老师的口吻逐字符档f(x) x^2读作 f, left parenthesis, x, right parenthesis, equals, x, squared最短调用示例renderA11yString(\\frac{1}{2}) // - start fraction, 1, divided by, 2, end fraction它对边界很诚实array 环境、\xrightarrowxArrow、\href、tag、\includegraphics等节点在源码中标记为尚未实现遇到会直接抛错清单可在 contrib/render-a11y-string/render-a11y-string.ts 里核对。上线前先确认自己站点的公式范围输出里的逗号是刻意加的为了让朗读断句更清楚。⚠️ 避坑清单按这 5 条检查再上线版本对齐所有扩展与核心 KaTeX 用同一版本当前仓库为 0.18.2混版是报错首因加载顺序mhchem 在 katex 之后、auto-render 之前顺序错了化学公式不渲染defer 配套核心与扩展都用defer加快首屏去掉其中一个另一个也要去掉性能兜底大文档用ignoredTags/ignoredClasses限定扫描范围别让它扫整个 body错误降级核心渲染配throwOnError: false显示原始公式auto-render 配errorCallback出错不白屏下一步看三处就够docs/api.md 查 APIdocs/supported.md 查支持的命令docs/options.md 查全部选项。【免费下载链接】KaTeXFast math typesetting for the web.项目地址: https://gitcode.com/GitHub_Trending/ka/KaTeX创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考