在网页中可以用KaTex显示数学公式,KaTex官网是https://katex.org
以下是KaTex的一个简单例子:
下载https://github.com/KaTeX/KaTeX/archive/v0.10.1.tar.gz
把dist/fonts、dist/katex.min.css、dist/katex.min.js解压到katex文件夹
新建一个katex.html文件,文件内容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="katex/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">
<script src="katex/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>
</head>
<body>
<span class="x">test</span>
<script>
var x = document.getElementsByClassName("x");
katex.render("\\frac{x^2}{a^2} + \\frac{y^2}{b^2} = 1", x[0]);
</script>
</body>
</html>
https://github.com/forlfs/forlfs.github.io/blob/master/katex.html
用浏览器打开katex.html即可看到式子(用火狐浏览器66版本打开或用Chrome浏览器73版本加--allow-file-access-from-files参数启动后打开):
x^2/a^2+y^2/b^2=1
可以访问我的Github Pages看效果:
https://forlfs.github.io/katex.html
另一个例子:
把dist/contrib/auto-render.min.js也解压到katex文件夹
新建一个katex1.html文件,文件内容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="katex/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">
<script defer src="katex/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>
<script defer src="katex/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
</head>
<body>
\(\frac{x^2}{a^2} + \frac{y^2}{b^2} = 1\)
</body>
</html>
https://github.com/forlfs/forlfs.github.io/blob/master/katex1.html
https://forlfs.github.io/katex1.html