原因
最近在做markdown 算法文章分享，算法肯定会涉及到数学复杂度，比如: O(lognX) 等数学公式的展示，但是如果写成这样子lognX，估计很难准确表达，因此上网搜索了一下数学表达式在前端页面如何展示的相关技术。
web 数学表达式展示解决方案
一般需要在web页面展示数学表达式相关技术，基本上都是在线编辑器，但是markdown也算是一种编辑器语法，所以上网收集了主要以下几种
- TeX，前期计算机无法生成数学公式排版或者排版很丑，因此
Donald E. Knuth设计了一套排版技术，拥有很多计算机的命令或者技术语言 - LaTeX，是一种基于TeX的实现排版系统，准确的基于TeX的应用系统，已经封装很多公式模板，直接套用即可
- MathJaX，基于LaTeX实现的JavaScript渲染器， 渲染稍慢，支持更多复杂的表示
- KaTeX，也基于LaTeX实现的是一个JavaScript库，对比MathJaX，渲染更快，支持若干简写字符，但是本身支持的范围较小
对比说明
MathJaX
MathJaX 是一个适用所有浏览器的展示数学表达式的js引擎。
官网地址：www.mathjax.org/
KaTex
KaTeX 是一个支持在网页上显示 TeX 公式的 JavaScript 库
通俗的说，Tex就是一种数学公式的排版语言规范，KaTeX是以Tex作为基础语言规范的实现版本。
官网地址：katex.org/
怎么用
快速使用，这里尝试demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LaTex公式 demo</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous"> <!-- The loading of KaTeX is deferred to speed up page rendering --> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js" integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4" crossorigin="anonymous"></script> <!-- To automatically render math in text elements, include the auto-render extension: --> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script> </head> <body> <p> 对数： <span>$$ log_nX $$</span></p> <p> 统计表达式： <span>$$ \sum_{i=1}^{n}{X_i} $$</span></p> </body> </html>
在gitbook中，你只需要添加相关插件即可：
npm install gitbook-plugin-katex，安装插件- 在
book.json中的plugins，新增:katex - 然后就可以在页面中使用语法
$$ log_nX $$展示为lognXlog_nXlognX
在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(lognX)O(log_nX)O(lognX)$$ \sum_{i=1}^{n}{X_i} $$统计表达式 ∑i=1nXi \sum_{i=1}^{n}{X_i}∑i=1nXi
有个在线编辑网站能帮你快速生成公式，请访问Latex公式编辑器
如果要想学习更多公式，这里分享一些教程：
