LaTeX和KaTeX的介绍
时间:2022-01-10 16:48 来源:网络 作者:浅尘 点击:次
历史:
上期讲到TeX,由于它是基于底层编程语言的电子排版系统,提供版面编辑的底层命令,使用时操作复杂,工作效率不高,所以基于TeX的高灵活性高可扩展性,创造出了LaTex。
LaTex(https://www.latex-project.org/)是TeX的扩展命令集合,通过整合常用的版面设置操作,降低了排版的工作量和难度。
LaTex 强大的排版功能,特别是对科技文档的支持,已经使它成为撰写科研论文的事实上的标准,它完全使用文本描述排版,对于复杂的数学公式、表格、化学分子式等完全不在话下,甚至可以排五线谱、棋谱、电路图等。
但对于前端开发而言,需求是在网页上以文本形式展示数学公式,所以只需要一个LaTeX的子集,能渲染数学公式即可。
KaTeX就是这样一个支持HTML的轻量级的数学公式引擎,它由Khan Academy(https://www.khanacademy.org/)开发,使用起来也非常简单。
npm地址:https://www.npmjs.com/package/katex
github地址:https://github.com/KaTeX/KaTeX
官网地址:https://katex.org/
第一步,引入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=rac{-bpmsqrt{b^2-4ac}}{2a}", document.getElementById("math"));
使用JavaScript手动渲染还是稍微麻烦了一点,最好是通过Markdown按照下面的语法:
```math x=rac{-bpmsqrt{b^2-4ac}}{2a} ```
就自动渲染出数学公式:
x=2a−b±b2−4ac
如果要内嵌KaTeX公式,可以用这样的Markdown语法:
内嵌的Katex效果$`E=mc^2`$就是这样
内嵌的KaTeX效果E=mc2就是这样。
通过一点点jQuery的代码,很容易实现自动渲染。
可视化:
渲染公式很容易,但是像这样的公式:
f(x)=∫−∞∞fξe2πiξxdξ
想要正确地写出它的文本形式可不容易:
f(x)=int_{-infty}^inftywidehat fxi,e^{2pi ixi x},dxi
如果仅仅为了写个公式,就去学LaTeX语法,那没有十天半月的肯定不行。这个时候,你需要一个可视化公式编辑器(http://www.wiris.com/editor/demo/en/developers)的神器,它可以让我们可视化地编辑公式,然后自动得到它的LaTeX文本。
|