使用KaTeX渲染数学公式

在Word中，我们经常用到公式编辑器，来编辑数学公式。

但是，在网页上，如何方便地插入数学公式呢？比如像这样的公式：

x=−b±b2−4ac2ax=\frac{-b\pm\sqrt{b^2-4ac}}{2a}x=2a−b±b2−4ac

一个简单的方法是把公式做成图片，但是图片既不好排版，又很难缩放。最好的方法是用文字来描述数学公式，把渲染的工作交给引擎，这样就可以方便地编辑公式。

实际上，在文字处理领域，早就有非常成熟的排版系统LaTeX，它完全使用文本描述排版，对于复杂的数学公式、表格、化学分子式等完全不在话下，甚至可以排五线谱、棋谱、电路图等。

我们的需求是在网页上以文本的形式展示数学公式，所以只需要一个LaTeX的子集，能渲染数学公式即可。

KaTeX就是这样一个支持HTML的轻量级的数学公式引擎，它由Khan Academy开发，使用起来也非常简单。

第一步，引入KaTeX的JS代码与CSS样式：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js"></script>

第二步，通过一个简单的JS调用就可以正确渲染出数学公式：

katex.render("x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}", document.getElementById("math"));

使用JavaScript手动渲染还是稍微麻烦了一点，最好是通过Markdown按照下面的语法：

```math
x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
```

就自动渲染出数学公式：

x=−b±b2−4ac2ax=\frac{-b\pm\sqrt{b^2-4ac}}{2a}x=2a−b±b2−4ac

如果要内嵌KaTeX公式，可以用这样的Markdown语法：

内嵌的Katex效果$`E=mc^2`$就是这样

内嵌的KaTeX效果E=mc2E=mc^2E=mc2就是这样。

通过一点点jQuery的代码，很容易实现自动渲染。

可视化

渲染公式很容易，但是像这样的公式：

f(x)=∫−∞∞f^ξe2πiξxdξf(x)=\int_{-\infty}^\infty\widehat f\xi\,e^{2\pi i\xi x}\,d\xif(x)=∫−∞∞fξe2πiξxdξ

想要正确地写出它的文本形式可不容易：

f(x)=\int_{-\infty}^\infty\widehat f\xi\,e^{2\pi i\xi x}\,d\xi

如果仅仅为了写个公式，就去学LaTeX语法，那没有十天半月的肯定不行。这个时候，你需要一个可视化公式编辑器的神器，它可以让我们可视化地编辑公式，然后自动得到它的LaTeX文本：

现在，就可以在页面上愉快地和数学公式玩耍了！

使用KaTeX渲染数学公式相关推荐

在vue中渲染数学公式 - MathJax
在vue中渲染数学公式 - MathJax 1.开发背景目前在使用vue+elementui做一个考试管理系统,在做学生考试页面时需要用到数学公式,但是后台解析出来后不是图片,而且如果是图片的话放在 ...
JS配置KaTeX渲染LaTeX公式
一.前言 LaTeX\LaTeXLATEX公式在许多技术性网站中很有用,尤其是论坛类网站--支持LaTeX语法能使用户体验大大提高. 例如(摘自Demo KaTeX与Mathjax的比较): 1(ϕ ...
CSDN Markdown编辑技巧 -使用Katex插入数学公式
文章目录参考文献如何让公式居中显示如何让居中显示的公式按等号对齐为文字增加颜色参考文献 Katex Supported Functions 如何让公式居中显示使用$$ $$就可以让公式居中 ...
Latex常用数学公式
Latex常用数学公式 1.戴帽子的字母 2.希腊字母 3.任意 | 存在 | 非 4.运算符基本运算符优雅的省略号美丽的括号字体矩阵常用箭头行列式,矩阵,方程组Latex表示 1 行列 ...
Markdown (3)
Markdown(3) 链接自动链接写一个网址,Typora会自动识别.在Typora里按Ctrl加鼠标左键点击就可以打开对应网站.导出的网页或者PDF中这些网址会被渲染为链接.鼠标左键点击就可以 ...
KaTex数学公式笔记
KaTex数学公式学习笔记本文参考资料1 本文作为typora使用教程(持续更新)的补充我为什么要学这个,我也不知道,明明这些天很忙的,可能是我太闲了吧. 学好英语,所谓的英语无用论是扯淡. 在t ...
渲染器引入KaTeX 模块——实现实时渲染
我们在 Gitea 1.18 版的 Markdown 渲染器中引入了 KaTeX 模块,这使得 Gitea 前端界面具备了渲染数学公式的能力,你可以在文本编辑器中混合使用 TeX 语法,在线分享你的数 ...
Markdown/KaTeX/LaTeX语法、工具及模板大全（持续更新ing...）
诸神缄默不语-个人CSDN博文目录最近更新:2022.11.30 最初更新:2021.11.15 更新日志见本文文末. LaTex核心是套模板,Markdown也就是简单学一下基础语法就可以用了,不 ...
hexo主题渲染latex公式之多行公式显示问题
问题描述: 问题解决:不使用 mathjax,使用 Katex 更换渲染引擎问题描述: hexo-matery多行公式(矩阵不换行)显示问题. 我的博客地址,交流来博客的留言板. 问题解决:不使用 ...

使用KaTeX渲染数学公式

使用KaTeX渲染数学公式

可视化

使用KaTeX渲染数学公式相关推荐

最新文章

热门文章