网页渲染数学公式之KaTeX引入

科技2022-07-12 132

KaTeX可以排版复杂的数学公式，在网页上直接应用公式文字而不是图片是一个不错的选择。 1.首先引入对应KaTeX的css样式，js脚本文件。

可以看到引入了css文件，katex.min.js文件，还有auto-render.min.js这个script标签还注册了一个onload事件，事件回调了一个renderMathInElement函数。 2.直接定义一个script标签对渲染数学公式，然后填充元素。

可以看到，这里引入了katex变量，这个变量随着上面引入的katex.min.js已经成了全局变量，所以可以直接使用的呢。如果是再node里面应该需要再使用的地方import进来。原理是一样的。 3完整的代码如下

<!DOCTYPE html>  <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script> </head> <body> <div id="math"> </div> </body> <script type="text/javascript" > katex.render("c = \\pm\\sqrt{a^2 + b^2}", document.getElementById("math"), { throwOnError: false }); </script> </html>

这样。保存文件后缀为html，就可以直接再浏览器上测试效果了，会在浏览器左上角渲染出一个类似这样的数学等式 4.如果你想加速网页DOM加载速度，那么，可以为上面引入的script标签加入defer属性，类似这样

这样的话，标签里面的js是移步加载的，DOM文档渲染好了，它才开始加载，这样，网页的体验会好一点。然而如果移步加载的话，你使用katex这个全局变量的时候可能由于没有初始化好这个变量造成变量未定义错误。所以，我们需要监听一个事件，等待网页加载完毕，再执行数学公式的渲染。类似这样

document.addEventListener("DOMContentLoaded", function() { katex.render("c = \\pm\\sqrt{a^2 + b^2}", document.getElementById("math"), { throwOnError: false }); });

通过注册DOMContentLoaded事件的监听，然后回调katex.render函数，那么，我们就可以游刃有余的使用katex取渲染数学公式了。如果有什么疑问，欢迎留言讨论。如果感觉我写的对你有帮助，欢迎 donate me

Processed: 0.013, SQL: 8