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");}
}

效果图：

html使用 katex 数学公式相关推荐

CSDN的markdown的KaTex数学公式
文章目录一.行内与独行 1.行内公式 2.居中公式二.上标.下标与组合三.汉字.字体与格式 1.上下的效果 2.占位符 3.定界符与组合 4.四则运算 5.高级运算 6.逻辑运算 7.集合运算 ...
KaTex数学公式笔记
KaTex数学公式学习笔记本文参考资料1 本文作为typora使用教程(持续更新)的补充我为什么要学这个,我也不知道,明明这些天很忙的,可能是我太闲了吧. 学好英语,所谓的英语无用论是扯淡. 在t ...
KaTeX数学公式总结
大家好,我是胡亥大魔王.今天介绍KaTeX数学公式强调 a′a'a′ a' a~\tilde{a}a~ \tilde{a} g˚\mathring{g}g˚ \mathring{g} a′′a'' ...
Markdown / KaTex数学公式汇总
目录 [LaTex和KaTex] [软件推荐 Mathpix] 一.如何插入公式二.上下标三.常用运算符四.高级运算符五.常用数学符号六.特殊符号 6.1 箭头 6.2 公式序号七.括号使 ...
【转载】KaTeX 数学公式大全
文章目录转载自前言受支持的功能声调记号定界符(括号之类) 定界符大小[5]^{[5]}[5] 环境[6]^{[6]}[6] Unicode\text{Unicode}Unicode[7]^{ ...
KaTex 数学公式基础
文章目录一.例子二.字母和特殊字符字母特殊字符三.重音四.分隔符五.逻辑和集合六.运算符连续运算符二元运算符分数和二项式数学符号关系运算符箭头七.环境八.布局与样式注 ...
KaTex数学公式编辑器相关
来源: https://khan.github.io/KaTeX/function-support.html 图片在新标签页打开可看清晰大图. KaTex与MathJax https://jsperf ...
KaTeX数学公式基础
基础教学和快速参考函数显示方式内联函数(插入)$...$表示......... 显示函数(居中)$$...$$表示......... 希腊字母小写: $\alpha$ $\beta$ $\ome ...
KaTeX数学公式整理
分隔符 ⌈⌉⌈ ⌉⌈⌉ ⌈ ⌉ ⌈\lceil⌈ \lceil ⌉\rceil⌉ \rceil ↑\uparrow↑ \uparrow [][ ][] [ ] [\lbrack[ \lbrack ]\ ...

html使用 katex 数学公式

html使用 katex 数学公式

html使用 katex 数学公式相关推荐

最新文章

热门文章