js在线数学公式解析插件katex.js-自学php网

js在线数学公式解析插件katex.js

来源：未知时间：2021-05-28 11:13 作者：小飞侠阅读:次

[导读] js在线数学公式解析插件katex.js 网页保存简单数学公式是可以的，但是遇到复杂的就麻烦了，不过有了katex就方便多了，可以把LaTeX语法转换成 span,xml,svg等组成的复杂数学公式呈现。基...

js在线数学公式解析插件katex.js

网页保存简单数学公式是可以的，但是遇到复杂的就麻烦了，不过有了katex就方便多了，可以把LaTeX语法转换成 span,xml,svg等组成的复杂数学公式呈现。

官网：https://katex.org/

效果预览：http://res.zixuephp.com/test/math/katex.html

基本用法：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>katex</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css" integrity="sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js" integrity="sha384-YNHdsYkH6gMx9y3mRkmcJ2mFUjTd0qNQQvY9VYZgQd7DcN7env35GzlmFaZ23JGp" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"></script>
</head>
<body>
<div id="math"></div>
<div id="mathB"></div>
<p>内嵌的Katex效果$E=mc^2$就是这样</p>
<p>$\\overbrace{blog.csdn.net/lindexi_gd}_{lindexi} + \\underbrace{lindexi.github.io}_{doubi}$</p>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
          // customised options
          // • auto-render specific keys, e.g.:
          delimiters: [
              {left: '$$', right: '$$', display: true},
              {left: '$', right: '$', display: false},
              {left: '\\(', right: '\\)', display: false},
              {left: '\\[', right: '\\]', display: true}
          ],
          // • rendering keys, e.g.:
          throwOnError : false
        });
    });

window.onload = function(){
// 数学公式
katex.render("x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}", document.getElementById("math"));

// 数学公式2
katex.render("\\sin\\theta \\qquad \\cos\\theta \\qquad \\tan\\theta \\qquad \\cot \\theta", document.getElementById("mathB"));


}
</script>
</body>
</html>

解释说明：

2种方式呈现

第一种是JS操作：

// 数学公式
katex.render("x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}", document.getElementById("math"));

第二种是纯网页自动渲染，不过这种需要配置以下，也就是配置定界符。

<p>内嵌的Katex效果$E=mc^2$就是这样</p>
<p>$\\overbrace{blog.csdn.net/lindexi_gd}_{lindexi} + \\underbrace{lindexi.github.io}_{doubi}$</p>

配置说明：

此扩展window.renderMathInElement使用以下API公开了一个函数：

function renderMathInElement(elem, options)

elem是HTML DOM元素。该函数将递归搜索此元素内的文本节点并在其中渲染数学。

options是一个可选的对象参数，除了五个自动渲染专用的键之外，它还可以具有与传递给的对象katex.render相同的键：

delimiters：这是用于查找数学的定界符的列表，以与列表相同的顺序进行处理。每个定界符具有三个属性：

默认值为：

[
  {left: "$$", right: "$$", display: true},
  {left: "\\(", right: "\\)", display: false},
  {left: "\\begin{equation}", right: "\\end{equation}", display: true},
  {left: "\\begin{align}", right: "\\end{align}", display: true},
  {left: "\\begin{alignat}", right: "\\end{alignat}", display: true},
  {left: "\\begin{gather}", right: "\\end{gather}", display: true},
  {left: "\\begin{CD}", right: "\\end{CD}", display: true},
  {left: "\\[", right: "\\]", display: true}]

如果您想通过添加对内联数学的支持$...$，请确保在后面列出它 $$，如下所示。（由于规则是按顺序处理的，因此将$规则放在最前面会被$$视为空的数学表达式。）

[
  {left: "$$", right: "$$", display: true},
  {left: "$", right: "$", display: false},
  {left: "\\(", right: "\\)", display: false},
  {left: "\\[", right: "\\]", display: true}]

left：开始数学表达式的字符串（即左定界符）。
right：以数学表达式结尾的字符串（即右定界符）。
display：表达式中的数学是否应以显示模式呈现的布尔值。

ignoredTags：这是递归时要忽略的DOM节点类型的列表。默认值为 ["script", "noscript", "style", "textarea", "pre", "code", "option"]。
ignoredClasses：这是递归时要忽略的DOM节点类名称的列表。默认情况下，未设置此值。
errorCallback：如果在渲染过程中发生严重错误，则返回消息和错误堆栈的回调方法。默认使用console.error。
preProcess：一个回调函数，(math: string) => string用于在渲染之前处理数学表达式。

displayModeoptions对象的属性将被忽略，而是取自display键中相应条目的 delimiters键。

相同的options.macros对象（默认为空对象{}）被传递到的多个调用中katex.render，以便连续的方程式可以通过来建立共享宏\gdef。

以上就是js在线数学公式解析插件katex.js全部内容，感谢大家支持自学php网。

js实现调用网络摄像头及常见错误处理

如何给js的console.log添加颜色

子栏目