KaTeX是一个用于数学公式渲染的JavaScript库,可以在网页上方便地显示数学符号和公式。下面是KaTeX的使用方法:
- 在网页中引入KaTeX的CSS和JS文件:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.2/katex.min.css" integrity="sha384-yUgjHsYLjRWBwS8HuT0GmN5rVHSBy/4vGiBTdeZC2orGv6ZdeuW8tDh+qJ54+JmB" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.2/katex.min.js" integrity="sha384-PxO7uk8Hp61dE14zjZIzXOZwTJqzGDy/DY8YfQb8g5aW1bTDMhfwKWjvK7mZfQgT" crossorigin="anonymous"></script>
- 在需要显示数学公式的地方,使用
<span>
标签包裹公式内容,并添加属性data-expr
,内容为需要渲染的公式,例如:
<span data-expr="x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}"></span>
- 在JavaScript中调用KaTeX的渲染函数:
document.addEventListener("DOMContentLoaded", function() {var spans = document.querySelectorAll("span[data-expr]");for (var i = 0; i < spans.length; i++) {var expr = spans[i].getAttribute("data-expr");katex.render(expr, spans[i]);}
});
以上代码会在页面加载完成后,遍历所有带有data-expr
属性的<span>
标签,将其内部表达式渲染为数学公式。
该方法可以兼容大部分主流浏览器,提供了便捷的数学公式渲染功能。