如何在页面展示数学公式之Latex语法

QBorfy
1,300 阅读2分钟

原因

最近在做markdown 算法文章分享，算法肯定会涉及到数学复杂度，比如: O(lognX)O(log_nX) 等数学公式的展示，但是如果写成这样子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_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(lognX)O(log_nX)
  • $$ \sum_{i=1}^{n}{X_i} $$ 统计表达式 ∑i=1nXi \sum_{i=1}^{n}{X_i}

有个在线编辑网站能帮你快速生成公式，请访问Latex公式编辑器

如果要想学习更多公式，这里分享一些教程：

LaTeX 公式篇

LaTeX 公式语法速成

avatar
文章
阅读
粉丝