原因
最近在做markdown 算法文章分享,算法肯定会涉及到数学复杂度,比如: $$ O(log_nX) $$ 等数学公式的展示,但是如果写成这样子lognX
,估计很难准确表达,因此上网搜索了一下数学表达式在前端页面如何展示的相关技术。
web 数学表达式展示解决方案
一般需要在web页面展示数学表达式相关技术,基本上都是在线编辑器,但是markdown也算是一种编辑器语法,所以上网收集了主要以下几种
- TeX,前期计算机无法生成数学公式排版或者排版很丑,因此
Donald E. Knuth
设计了一套排版技术,拥有很多计算机的命令或者技术语言 - LaTeX,是一种基于TeX的实现排版系统,准确的基于TeX的应用系统,已经封装很多公式模板,直接套用即可
- MathJaX,基于LaTeX实现的JavaScript渲染器, 渲染稍慢,支持更多复杂的表示
- KaTeX,也基于LaTeX实现的是一个JavaScript库,对比MathJaX,渲染更快,支持若干简写字符,但是本身支持的范围较小
对比说明
MathJaX
MathJaX 是一个适用所有浏览器的展示数学表达式的js引擎。
KaTex
KaTeX 是一个支持在网页上显示 TeX 公式的 JavaScript 库
通俗的说,Tex就是一种数学公式的排版语言规范,KaTeX是以Tex作为基础语言规范的实现版本。
官网地址:https://katex.org/
怎么用
快速使用,这里尝试demo
1 |
|
在gitbook中,你只需要添加相关插件即可:
npm install gitbook-plugin-katex
,安装插件- 在
book.json
中的plugins
,新增:katex
- 然后就可以在页面中使用语法
$$ log_nX $$
展示为$$ log_nX $$
在hexo等博客,需要以下步骤:
- 找到主题配置文件:
themes\landscape\layout\_partial\after-footer.ejs
,添加js文件<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.js"></script>
- 找到主题配置文件:
themes\landscape\layout\_partial\after-footer.ejs
,添加css文件<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.css">
- 后续再安装hexo的katex插件即可
npm install hexo-katex --save
LaTeX数学公式编写
简单语法如下:
$$ log_nX $$
对数表达式 $$ O(log_nX) $$$$ \sum_{i=1}^{n}{X_i} $$
统计表达式 $$ \sum_{i=1}^{n}{X_i} $$
有个在线编辑网站能帮你快速生成公式,请访问Latex公式编辑器
如果要想学习更多公式,这里分享一些教程:
- 本文作者: Qborfy
- 本文链接: https://www.qborfy.com/today/20230108.html
- 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!