网站地图    收藏    合作   

主页 > 前端 > javascript >

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

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

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

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

image.png

网页保存简单数学公式是可以的,但是遇到复杂的就麻烦了,不过有了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网。

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论