网页渲染数学公式之KaTeX引入

最新推荐文章于 2024-01-03 12:52:24 发布
最新推荐文章于 2024-01-03 12:52:24 发布
阅读量2.5k 收藏 4
点赞数 1
分类专栏： JavaScript 文章标签： javascript css vue js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aLLLiyyy/article/details/108914167
版权

KaTeX可以排版复杂的数学公式，在网页上直接应用公式文字而不是图片是一个不错的选择。
1.首先引入对应KaTeX的css样式，js脚本文件。

  <head>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
	<script  src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
	<script  src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
    onload="renderMathInElement(document.body);"></script>

  </head>

可以看到引入了css文件，katex.min.js文件，还有auto-render.min.js这个script标签还注册了一个onload事件，事件回调了一个renderMathInElement函数。
2.直接定义一个script标签对渲染数学公式，然后填充元素。

<script type="text/javascript" >
	katex.render("c = \\pm\\sqrt{a^2 + b^2}", document.getElementById("math"), {
    throwOnError: false
});
</script>

可以看到，这里引入了katex变量，这个变量随着上面引入的katex.min.js已经成了全局变量，所以可以直接使用的呢。如果是再node里面应该需要再使用的地方import进来。原理是一样的。
3完整的代码如下

<!DOCTYPE html>
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
<html>
  <head>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
<script  src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
<script  src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
    onload="renderMathInElement(document.body);"></script>

  </head>
<body>
<div id="math">

</div>

</body>


<script type="text/javascript" >
katex.render("c = \\pm\\sqrt{a^2 + b^2}", document.getElementById("math"), {
    throwOnError: false
});
</script>

</html>

这样。保存文件后缀为html，就可以直接再浏览器上测试效果了，会在浏览器左上角渲染出一个类似这样的数学等式在这里插入图片描述
4.如果你想加速网页DOM加载速度，那么，可以为上面引入的script标签加入defer属性，类似这样

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
    onload="renderMathInElement(document.body);"></script>

这样的话，标签里面的js是移步加载的，DOM文档渲染好了，它才开始加载，这样，网页的体验会好一点。然而如果移步加载的话，你使用katex这个全局变量的时候可能由于没有初始化好这个变量造成变量未定义错误。所以，我们需要监听一个事件，等待网页加载完毕，再执行数学公式的渲染。类似这样

 document.addEventListener("DOMContentLoaded", function() {
       katex.render("c = \\pm\\sqrt{a^2 + b^2}", document.getElementById("math"), {
    throwOnError: false
});
    });

通过注册DOMContentLoaded事件的监听，然后回调katex.render函数，那么，我们就可以游刃有余的使用katex取渲染数学公式了。
如果有什么疑问，欢迎留言讨论。如果感觉我写的对你有帮助，欢迎 donate me

aLLLiyyy
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
KaTeX：Web的快速数学排版
02-02
KaTeX是一个快速，易于使用JavaScript库，用于在网络上进行TeX数学渲染。 快速： KaTeX同步呈现其数学运算，无需重排页面。 看看在它与竞争对手相比如何。 打印质量： KaTeX的布局基于Donald Knuth的TeX（数学排版的黄金标准）。 自包含： KaTeX没有依赖性，可以轻松地与您的网站资源捆绑在一起。 服务器端渲染：无论浏览器或环境如何，KaTeX都会产生相同的输出，因此您可以使用Node.js预渲染表达式并将其作为纯HTML发送。 KaTeX与所有主流浏览器兼容，包括Chrome，Safari，Firefox，Opera，Edge和IE 11。 KaTeX支持很多（但不是全部）LaTeX和许多LaTeX软件包。 请参阅。 试用KaTeX！ 入门 入门模板 <!DOCTYPE html > <!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly --> < html > < head > < link re
html数学公式输入渲染
01-03
html数学公式输入，页面渲染
uniapp中使用mathJax解析数学公式
03-15
uniapp中使用mathJax解析数学公式，兼容App与H5
KaTeX是一个快速易于使用的JavaScript库用于在Web上进行TeX数学渲染
08-08
KaTeX是一个快速，易于使用的JavaScript库，用于在Web上进行TeX数学渲染
MathJax（MarkdownPad 2 显示数学公式）
04-09
MarkdownPad 2 显示数学公式，使用MathJax MarkdownPad 2是不支持数学公式在编辑器内实时渲染的，但是MarkdownPad 2的好处是可以左右对比格式和效果。 这里介绍一个MarkdownPad 2 查看数学公式的方法。 使用教程：https://blog.csdn.net/qq_34243930/article/details/89158353
KaTeX一个快速易于使用的JavaScript库用于在Web上进行TeX数学渲染
08-14
KaTeX 一个快速，易于使用的JavaScript库，用于在Web上进行TeX数学渲染
JS配置KaTeX渲染LaTeX公式
qq_43491040的博客
02-04 6582
LaTeX公式在许多技术性网站中很有用，尤其是论坛类网站——支持LaTeX语法能使用户体验大大提高。 当然，这种语法不是HTML本来所支持的。因此，若要在网页中显示出TeX或LaTeX公式，必须引入一些解析器。常用的解析器有Mathjax及KaTeX，通常是Javascript编写的。 而KaTeX的好处在于：快。它的文件大小几乎是Mathjax的千分之一。尽管不能以此断言，但由于这一点，可以看到大部分大量使用到LaTeX的网站都是用KaTeX渲染。因此决定写一文章，以阐述KaTeX的安装及配置。
KaTeX.js
weixin_30497527的博客
07-10 784
KaTeX.js 官网：https://khan.github.io/KaTeX/ 转载于:https://www.cnblogs.com/aliwa/p/9291827.html
vue 中如何用 katex 解析用 latex 编写的数学公式
sally18的博客
07-21 2360
一,在index.html中引入官方自带的 CDN的简单配置. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1-beta/dist/katex.min.css"> <script src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"></script> <script src="http...
使用editor编辑器遇到的错误：katex.min.css is undefined和katex.min.js is undefined
只剩渣了的博客
05-02 1910
katex.min.css和katex.min.js 这两个文件未找到 原因：这两个文件使用的是国外的CDN，可以自己指定URL // 使用国外的CDN，加载速度有时会很慢，或者自定义URL // You can custom KaTeX load url. editormd.katexURL = { css : "//cdnjs.cloudflare.com/...
前端Js显示数学公式插件(MathJax最新源码)
09-26
MathJax官网总是下载失败，亲测可用，放一个2.3版本的源码在这里。MathJax是一款运行在浏览器中的开源的数学符号渲染引擎，使用MathJax可以方便的在浏览器中显示数学公式，不需要使用图片。目前，MathJax可以解析Latex、MathML和ASCIIMathML的标记语言。
用html标签直接引入Katex公式
uav360
05-25 1477
直接引入<head>和<body>标签即可 <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity= "sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" cross
js 如何手动插入 js 脚本
艾斯比
05-18 1356
通过创建 script 元素, 可以异步插入 js 脚本 // 创建 script 元素对象 let script = document.createElement("script"); // 设置 src 属性 script.src = "https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"; // 将 script 元素对象赋值给 body 元素的子元素 document.querySelector('body').append
使用latex优雅地编辑数学公式 离线版
最新发布
代码波士
01-03 493
使用katex.js在线编辑latex
KaTex, markdown支持数学公式
无风听海
11-27 532
KaTeX就是这样一个支持HTML的轻量级的数学公式引擎，它由Khan Academy开发，使用起来也非常简单。 第一步，引入KaTeX的JS代码与CSS样式： <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css" integrity="sha384-R4558gYOUz8mP9YWpZJjofhk+zx0AS11p36HnD2ZKj/6JR5z27gSSULCNHIRReV
vue中使用mavon-editor, 不使用cdn, 本地按需引入高亮样式
weixin_46213331的博客
04-28 1564
问题发现 我的项目中使用Nuxt.js开发，在使用mavon-editor的过程中发现，有时候外部样式文件会加载失败，如下图： 而这种情况似乎与家用网络有关，有时候成功有时候失败，而用手机流量则不会失败。 为了避免项目上线时不会导致部分用户无法使用，得采用本地引入css。 尝试解决 按照官网的说法，使用以下方式进行引入： <template> <div id="app"> <mavon-editor :subfield = "subfield"
完美渲染之数学公式
Jartto's Blog
07-08 1225
我们经常会用 Office Word 在文档中插入数学公式，有没有想过，如何在你的网页上渲染数学公式呢？让我们走进数学，欣赏一下公式渲染的美妙之处。 一、应用场景可以这么说：抛开场景的应用都是耍流氓 我们先来看看都有哪些场景应用到了数学公式，有个整体的印象。此外，可以扩展技术面，让你可以在做技术选型的时候游刃有余： 大数据分析当你要做一些大数据分析的时候，可能会用到很...
让docsify-katex支持化学公式mhchem扩展
witton的专栏
03-16 1279
在使用docsify构建Markdown文档时，如果想要支持数学公式，可以使用docsify-katex插件，但是该插件不支持化学公式mhchem扩展，比如下面的代码： \ce{Zn^2+ <=>[+ 2OH-][+ 2H+] $\underset{\text{amphoteres Hydroxid}}{\ce{Zn(OH)2 v}}$ <=>[+ 2OH-][+ 2H+] $\underset{\text{Hydroxozikat}}{\ce{[Zn(OH)4]^2-}}$
MathJax 与 Katex 在公式对齐、编号、交叉引用方面的不同
weixin_40301746的博客
04-05 2701
MathJax 与 Katex 在公式编号方面的不同 Mathjax渲染出的公式在细节上更美观，而KaTeX的好处在于渲染速度快，大部分大量使用到LaTeX的网站都是用KaTeX渲染。 Lightning-fast, even on pages with hundreds of expressions\color{Green}{\text{Lightning-fast, even on pages with hundreds ...
调用dll在c#上渲染数学公式的方法
06-10
可以使用以下步骤在 C# 中调用 MathMLControl.DLL 来渲染数学公式： 1. 引用 MathMLControl.DLL： 将 MathMLControl.DLL 复制到你的项目目录中，并在 Visual Studio 的解决方案资源管理器中右键点击“引用”，选择“添加引用”，在弹出的对话框中选择“浏览”，找到 MathMLControl.DLL 并添加引用。 2. 声明 MathMLControl 类型： 在你的代码中声明 MathMLControl 类型，例如： ```csharp using System.Runtime.InteropServices; [DllImport("MathMLControl.dll")] public static extern void SetBasePath(string pszBasePath); [DllImport("MathMLControl.dll")] public static extern bool LoadFile(string pszFileName); [DllImport("MathMLControl.dll")] public static extern bool LoadString(string pszMathML); [DllImport("MathMLControl.dll")] public static extern bool Render(IntPtr hDC, int x, int y, int cx, int cy); [DllImport("MathMLControl.dll")] public static extern string GetLastError(); public class MathMLControl { // 定义接口 } ``` 3. 调用 MathMLControl 接口： 在你的代码中调用 MathMLControl 接口来渲染数学公式，例如： ```csharp // 设置 MathMLControl.DLL 的基本路径 MathMLControl.SetBasePath("C:\\MathMLControl\\"); // 加载 MathML 文件 MathMLControl.LoadFile("C:\\MathMLControl\\example.mathml"); // 渲染 MathML 并将结果输出到指定的设备上 IntPtr hDC = this.CreateGraphics().GetHdc(); MathMLControl.Render(hDC, 0, 0, this.Width, this.Height); this.CreateGraphics().ReleaseHdc(hDC); // 获取 MathMLControl.DLL 的最后一次错误信息 string error = MathMLControl.GetLastError(); ``` 注意：以上代码仅供参考，实际使用时应根据具体情况进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值