KaTeX 社区生态实用指南5 个 contrib 扩展从接入到踩坑【免费下载链接】KaTeXFast math typesetting for the web.项目地址: https://gitcode.com/GitHub_Trending/ka/KaTeX本文按 5 个常见网页场景带你走一遍 KaTeX 扩展在社区生态里的用法自动渲染、公式复制、化学方程式、MathJax 迁移、无障碍每个场景都附可复制运行的接入代码。 场景 A让公式自动跑起来的 KaTeX auto-render 配置接了 KaTeX 之后你得为每个公式找容器、逐个调katex.render()一个课程页面几百个公式就能把你写崩溃。Auto-render自动渲染扩展递归扫描一个 DOM 元素下的文本节点找到分隔符包起来的内容后原地交给 KaTeX 渲染就是替你省掉逐次调用的活接入只要几行link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/katex.min.css script defer srchttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/katex.min.js/script script defer srchttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/contrib/auto-render.min.js/script script document.addEventListener(DOMContentLoaded, function () { renderMathInElement(document.body); }); /scriptKaTeX auto-render 配置最容易踩的坑行内$...$默认不开启因为正文里的美元符号会被误伤要开启就得显式传delimiters并且$规则必须排在$$后面否则$$会被先匹配成一个空公式。公式能自动渲染了可读者选中一个公式想贴进论文里呢✂️ 场景 BKaTeX copy-tex 复制公式不丢 LaTeX 源码默认情况下复制选中的公式只会得到一堆 HTML 碎片贴进 Word 或 LaTeX 编辑器都是乱码。Copy-tex剪贴板扩展监听浏览器的 copy 事件把选区里的 KaTeX 公式在纯文本层还原成 LaTeX 源码HTML 层则保持原样引一下脚本就生效不需要写任何代码script srchttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/contrib/copy-tex.min.js/script注意 KaTeX copy-tex 复制公式用的分隔符是写死的行内$...$、块级$$...$$。想换成\(...\)和\[...\]无法在运行时配置需要把contrib/copy-tex/copy-tex.ts拷进自己工程改copyDelimiters。如果你的站点内容不止数学还涉及化学公式就不再是唯一主角——你还需要写出化学方程式。 场景 C用 KaTeX mhchem 化学公式写反应式核心 KaTeX 不认识\ce2H2 O2 - 2H2O这类内容你得用手搓下标和箭头单位表达式更是无从下手。mhchem 扩展补上了\ce化学方程式和\pu单位两个命令语法与 LaTeX 的 mhchem 包兼容完整语法查 mhchem Manual 即可script defer srchttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/contrib/mhchem.min.js/script页面里直接写\ce{2H2 O2 - 2H2O}就能排成规范的化学方程式。唯一的坑旧版 mhchem.sty 里的\cf命令已弃用这个扩展只支持\ce需要\cf就自己定义一个指向\ce的宏。站点的公式如果是 MathJax 模板批量产出的为了换渲染库去改模板就太亏了。 场景 DKaTeX 从 MathJax 迁移不动模板存量 HTML 里塞满script typemath/tex标签时逐个改成 span 加 JS 调用的成本很高。mathtex-script-type 扩展MathJax 兼容扩展遍历页面里 typemath/tex 的 script 标签逐个用 KaTeX 渲染并把标签替换成渲染结果让 KaTeX 从 MathJax 迁移变成加一行引入的事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会原样被渲染type 里加modedisplay就是展示模式公式报错时它会保留源码原文兜底contrib/mathtex-script-type/mathtex-script-type.js里的console.error会告诉你是哪条挂了。页面看起来没问题了但对依赖屏幕阅读器的视障读者来说公式还是一堆念不出意义的span。️ 场景 EKaTeX 无障碍 a11y让屏幕阅读器念出公式屏幕阅读器把渲染好的公式逐字念出来得到的是一串听不出的噪音。render-a11y-string无障碍辅助工具把 KaTeX 生成的解析树转写成屏幕阅读器能念的文本描述比如\frac{1}{2}会变成 start fraction, 1, divided by, 2, end fractionimport renderA11yString from katex/contrib/render-a11y-string; const speech renderA11yString(\\frac{1}{2}); // - start fraction, 1, divided by, 2, end fraction它不是引个脚本就自动挂到页面上要在你的代码里调用把返回的字符串写进aria-label这类属性矩阵array这类节点目前还没实现直接调用会抛错记得包一层 try/catch。 五分钟接入清单CDN 引入加关键调用把前面场景的脚本合并成一段照抄即可没有化学内容就删掉 mhchem 那行link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/katex.min.css script defer srchttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/katex.min.js/script script defer srchttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/contrib/mhchem.min.js/script script defer srchttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/contrib/auto-render.min.js/script script defer onloadrenderMathInElement(document.body);/script三个坑记一下加载顺序是 katex → mhchem → auto-rendermhchem 放在 auto-render 之后它先扫到的\ce就识别不出来各 contrib 脚本和 katex.min.js 的版本号要保持一致混版本容易出加载错误copy-tex 和 mathtex-script-type 属于引上即生效的被动扩展不用额外调用。 下一步去哪看动手前先对照 支持的命令列表 确认你的公式写法在覆盖范围内所有可配项在 选项配置 和 API 参考 里都有说明。想自己写扩展的话看 贡献指南然后 clone https://gitcode.com/GitHub_Trending/ka/KaTeX 把 contrib/ 目录下的五个扩展模板逐个读一遍照着结构改就行。建议的动作很具体先打开 docs/supported.md 核对你要用的语法再把仓库 clone 下来通读 contrib/ 的扩展模板——下次遇到功能缺口你知道怎么自己补上了。【免费下载链接】KaTeXFast math typesetting for the web.项目地址: https://gitcode.com/GitHub_Trending/ka/KaTeX创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
KaTeX 社区生态实用指南5 个 contrib 扩展从接入到踩坑【免费下载链接】KaTeXFast math typesetting for the web.项目地址: https://gitcode.com/GitHub_Trending/ka/KaTeX本文按 5 个常见网页场景带你走一遍 KaTeX 扩展在社区生态里的用法自动渲染、公式复制、化学方程式、MathJax 迁移、无障碍每个场景都附可复制运行的接入代码。 场景 A让公式自动跑起来的 KaTeX auto-render 配置接了 KaTeX 之后你得为每个公式找容器、逐个调katex.render()一个课程页面几百个公式就能把你写崩溃。Auto-render自动渲染扩展递归扫描一个 DOM 元素下的文本节点找到分隔符包起来的内容后原地交给 KaTeX 渲染就是替你省掉逐次调用的活接入只要几行link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/katex.min.css script defer srchttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/katex.min.js/script script defer srchttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/contrib/auto-render.min.js/script script document.addEventListener(DOMContentLoaded, function () { renderMathInElement(document.body); }); /scriptKaTeX auto-render 配置最容易踩的坑行内$...$默认不开启因为正文里的美元符号会被误伤要开启就得显式传delimiters并且$规则必须排在$$后面否则$$会被先匹配成一个空公式。公式能自动渲染了可读者选中一个公式想贴进论文里呢✂️ 场景 BKaTeX copy-tex 复制公式不丢 LaTeX 源码默认情况下复制选中的公式只会得到一堆 HTML 碎片贴进 Word 或 LaTeX 编辑器都是乱码。Copy-tex剪贴板扩展监听浏览器的 copy 事件把选区里的 KaTeX 公式在纯文本层还原成 LaTeX 源码HTML 层则保持原样引一下脚本就生效不需要写任何代码script srchttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/contrib/copy-tex.min.js/script注意 KaTeX copy-tex 复制公式用的分隔符是写死的行内$...$、块级$$...$$。想换成\(...\)和\[...\]无法在运行时配置需要把contrib/copy-tex/copy-tex.ts拷进自己工程改copyDelimiters。如果你的站点内容不止数学还涉及化学公式就不再是唯一主角——你还需要写出化学方程式。 场景 C用 KaTeX mhchem 化学公式写反应式核心 KaTeX 不认识\ce2H2 O2 - 2H2O这类内容你得用手搓下标和箭头单位表达式更是无从下手。mhchem 扩展补上了\ce化学方程式和\pu单位两个命令语法与 LaTeX 的 mhchem 包兼容完整语法查 mhchem Manual 即可script defer srchttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/contrib/mhchem.min.js/script页面里直接写\ce{2H2 O2 - 2H2O}就能排成规范的化学方程式。唯一的坑旧版 mhchem.sty 里的\cf命令已弃用这个扩展只支持\ce需要\cf就自己定义一个指向\ce的宏。站点的公式如果是 MathJax 模板批量产出的为了换渲染库去改模板就太亏了。 场景 DKaTeX 从 MathJax 迁移不动模板存量 HTML 里塞满script typemath/tex标签时逐个改成 span 加 JS 调用的成本很高。mathtex-script-type 扩展MathJax 兼容扩展遍历页面里 typemath/tex 的 script 标签逐个用 KaTeX 渲染并把标签替换成渲染结果让 KaTeX 从 MathJax 迁移变成加一行引入的事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会原样被渲染type 里加modedisplay就是展示模式公式报错时它会保留源码原文兜底contrib/mathtex-script-type/mathtex-script-type.js里的console.error会告诉你是哪条挂了。页面看起来没问题了但对依赖屏幕阅读器的视障读者来说公式还是一堆念不出意义的span。️ 场景 EKaTeX 无障碍 a11y让屏幕阅读器念出公式屏幕阅读器把渲染好的公式逐字念出来得到的是一串听不出的噪音。render-a11y-string无障碍辅助工具把 KaTeX 生成的解析树转写成屏幕阅读器能念的文本描述比如\frac{1}{2}会变成 start fraction, 1, divided by, 2, end fractionimport renderA11yString from katex/contrib/render-a11y-string; const speech renderA11yString(\\frac{1}{2}); // - start fraction, 1, divided by, 2, end fraction它不是引个脚本就自动挂到页面上要在你的代码里调用把返回的字符串写进aria-label这类属性矩阵array这类节点目前还没实现直接调用会抛错记得包一层 try/catch。 五分钟接入清单CDN 引入加关键调用把前面场景的脚本合并成一段照抄即可没有化学内容就删掉 mhchem 那行link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/katex.min.css script defer srchttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/katex.min.js/script script defer srchttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/contrib/mhchem.min.js/script script defer srchttps://cdn.jsdelivr.net/npm/katex0.18.2/dist/contrib/auto-render.min.js/script script defer onloadrenderMathInElement(document.body);/script三个坑记一下加载顺序是 katex → mhchem → auto-rendermhchem 放在 auto-render 之后它先扫到的\ce就识别不出来各 contrib 脚本和 katex.min.js 的版本号要保持一致混版本容易出加载错误copy-tex 和 mathtex-script-type 属于引上即生效的被动扩展不用额外调用。 下一步去哪看动手前先对照 支持的命令列表 确认你的公式写法在覆盖范围内所有可配项在 选项配置 和 API 参考 里都有说明。想自己写扩展的话看 贡献指南然后 clone https://gitcode.com/GitHub_Trending/ka/KaTeX 把 contrib/ 目录下的五个扩展模板逐个读一遍照着结构改就行。建议的动作很具体先打开 docs/supported.md 核对你要用的语法再把仓库 clone 下来通读 contrib/ 的扩展模板——下次遇到功能缺口你知道怎么自己补上了。【免费下载链接】KaTeXFast math typesetting for the web.项目地址: https://gitcode.com/GitHub_Trending/ka/KaTeX创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
