KaTex的一个简单例子

最新推荐文章于 2024-04-25 09:32:49 发布

chongpu6421

最新推荐文章于 2024-04-25 09:32:49 发布

阅读量709

点赞数

原文链接：https://my.oschina.net/u/1187746/blog/3026785

版权

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

chongpu6421

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
KaTex的一个简单例子

在网页中可以用KaTex显示数学公式，KaTex官网是https://katex.org 以下是KaTex的一个简单例子：下载https://github.com/KaTeX/KaTeX/archive/v0.10.1.tar.gz 把dist/fonts、dist/katex....
复制链接

扫一扫