html使用 katex 数学公式

最新推荐文章于 2024-08-18 02:55:28 发布

敲代码的旺仔

最新推荐文章于 2024-08-18 02:55:28 发布

阅读量1.9k

点赞数 1

文章标签： html javascript

本文链接：https://blog.csdn.net/qq_43053533/article/details/111885532

版权

html使用 katex 数学公式

官网：KaTeX官网
官网下载压缩包，我是直接下载本地使用的，这个网址是：下载网址在这里插入图片描述
下载完成后按照他的说明引入js和css就可以，此处需注意，本地使用时不需要加官网引用所需的integrity="sha384-qCEsSYDSH0x5I45nNW4oXemORUZnYFtPy/FqB/OjqxabTMW5HVaaH9USK4fN3goV" crossorigin="anonymous"，直接引入js和css，像<script defer src="./katex/katex.min.js"></script>或者是<link rel="stylesheet" href="./katex/katex.min.css">即可。

开始使用：
此处我做的是一个可以输入多个公式的demo
html部分：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <!--本页面CSS↓-->

    <!--本页面JS-->
	<script src="js/jquery.min.js"></script>
	<script src="layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
	<!-- 公式 -->
	<link rel="stylesheet" href="./katex/katex.min.css">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script defer src="./katex/katex.min.js"></script>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
   
</head>
<body>
	<style>textarea{width: 100px;height: 100px; border: 1px solid #333;}</style>
	<button onclick="addGs()">添加公式</button>
	<div class="GsNum"></div>
	<textarea id="demo-input0" num="0" spellcheck="false" oninput="doDemo(this)">
		% \f is defined as #1f(#2) using the macro
				\f\relax{x} = \int_{-\infty}^\infty
					\f\hat\xi\,e^{2 \pi i \xi x}
					\,d\xi
		</textarea>
			<textarea id="demo-input1" num="1" spellcheck="false" oninput="doDemo(this)">
				% \f is defined as #1f(#2) using the macro
				\f\relax{x} = \int_{-\infty}^\infty
					\f\hat\xi\,e^{2 \pi i \xi x}
					\,d\xi</textarea>
			<div id="demo-output0"></div>
			<div id="demo-output1"></div>
	<textarea id="macros" placeholder="JSON" style="display:none">
		{
			"\\f": "#1f(#2)"
		}</textarea>
		<script defer src="./katex/index.js" type="text/javascript"></script>
		
</body>
</html>

js部分：


/* eslint-disable no-var */
/* global katex: false */
/* global ClipboardJS: false */

// load fonts
window.WebFontConfig = {
    custom: {
        families: ['KaTeX_AMS', 'KaTeX_Caligraphic:n4,n7', 'KaTeX_Fraktur:n4,n7',
            'KaTeX_Main:n4,n7,i4,i7', 'KaTeX_Math:i4,i7', 'KaTeX_Script',
            'KaTeX_SansSerif:n4,n7,i4', 'KaTeX_Size1', 'KaTeX_Size2', 'KaTeX_Size3',
            'KaTeX_Size4', 'KaTeX_Typewriter'],
    },
};
var num = 0;
function addGs(){
    var html = '<textarea id="demo-input'+num+'" num="'+num+'" spellcheck="false" οninput="doDemo(this)"></textarea><div id="demo-output'+num+'"></div>';
    num = num + 1;
    $('.GsNum').append(html);
}
function doDemo(obj) {
    var n_num = $(obj).attr('num');
    var demoInput = document.getElementById("demo-input"+n_num);
    var demoOutput = document.getElementById("demo-output"+n_num);
    try {
        console.log(demoInput.value);

        katex.render(demoInput.value, demoOutput, {
            displayMode: true,
            leqno: false,
            fleqn: false,
            throwOnError: false,
            errorColor: '#cc0000',
            strict: 'warn',
            output: 'htmlAndMathml',
            trust: false,
            macros: JSON.parse(document.getElementById("macros").value)
        });

        var html = katex.renderToString(demoInput.value, {
            displayMode: true,
            leqno: false,
            fleqn: false,
            throwOnError: false,
            errorColor: '#cc0000',
            strict: 'warn',
            output: 'htmlAndMathml',
            trust: false,
            macros: JSON.parse(document.getElementById("macros").value)
        });

        console.log(html);
    } catch (err) {
        while (demoOutput.lastChild) {
            demoOutput.removeChild(demoOutput.lastChild);
        }
        var msg = document.createTextNode(err.message);
        var span = document.createElement("span");
        span.appendChild(msg);
        demoOutput.appendChild(span);
        span.setAttribute("class", "errorMessage");
    }
}