当前位置: 首页 > 工具软件 > KaTeX > 使用案例 >

KaTex的一个简单例子

姜淇
2023-12-01

在网页中可以用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

 

转载于:https://my.oschina.net/u/1187746/blog/3026785

 类似资料: