安装和使用

csdn和npm均可

加载完成后，自动渲染整个body里的公式

<!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" />

    <!-- katex核心包 -->

    <link href="https://cdn.bootcdn.net/ajax/libs/KaTeX/0.16.2/katex.min.css" rel="stylesheet" />

    <script defer src="https://cdn.bootcdn.net/ajax/libs/KaTeX/0.16.2/katex.min.js"></script>

    <!-- katex辅助包：自动渲染 -->

    <script defer src="https://cdn.bootcdn.net/ajax/libs/KaTeX/0.16.2/contrib/auto-render.min.js"></script>

    <title>Document</title>

</head>

<body>

    <div>$\sum_{i=0}^{n}i^2$</div> // 这个表达式就是LaTex规定的宏

    <div>\(\sum_{i=0}^{n}i^2\)</div>

    <script>

      document.addEventListener("DOMContentLoaded", function() {

        renderMathInElement(document.body, { // renderMathInElement这个函数就是 auto-render.js提供的

          delimiters: [

              // 意思是匹配页面上 以$开头和结尾的元素。 display决定是否占一整行

              {left: '$', right: '$', display: false},

              {left: '\\(', right: '\\)', display: false}

          ],

          throwOnError : false

        });

    });

    </script>

</body>

</html>

或者手动渲染

<!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" />

    <link href="https://cdn.bootcdn.net/ajax/libs/KaTeX/0.16.2/katex.min.css" rel="stylesheet" />

    <script src="https://cdn.bootcdn.net/ajax/libs/KaTeX/0.16.2/katex.min.js"></script>

    <title>Document</title>

</head>

<body>

    <div class="demo"></div>

    <script>

      katex.render("\\sum_{i=0}^{n}i^2", document.querySelector('.demo'), {

          throwOnError: false,

      });

    </script>

</body>

</html>

原理

这个插件会根据公式表达式字符串将其转换为一段绘制节点，如下

这个过程当然是需要消耗性能的，所以官方也提供了一个服务端渲染办法：

const html = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}");

//=> <span class="katex">...</span>

使用 MathJax、KaTex方案的共同问题是用HTML、CSS来渲染公式，非常冗长，如果采用了服务器端渲染，很容易超出数据库字段的长度限制，一个简单的公式，就会产生很多 HTML 结构。

但是我们也没得选择 不是吗？

katex1-初步使用的更多相关文章

  1. 移动端之Android开发的几种方式的初步体验

    目前越来越多的移动端混合开发方式,下面列举的大多数我都略微的尝试过,就初步的认识写个简单的心得: 开发方式 开发环境 是否需要AndroidSDK 支持跨平台 开发语言&技能 MUI Win+ ...

  2. CSharpGL(29)初步封装Texture和Framebuffer

    +BIT祝威+悄悄在此留下版了个权的信息说: CSharpGL(29)初步封装Texture和Framebuffer +BIT祝威+悄悄在此留下版了个权的信息说: Texture和Framebuffe ...

  3. Android自定义View初步

    经过上一篇的介绍,大家对于自定义View一定有了一定的认识,接下来我们就以实现一个图片下显示文字的自定义View来练习一下.废话不多说,下面进入我们的正题,首先看一下我们的思路,1.我们需要通过在va ...

  4. 初步认识Node 之Node为何物

    很多人即便是在使用了Node之后也不知道它到底是什么,阅读完本文你应该会有一个初步的.具体的概念了.    Node的目标 提供一种简单的构建可伸缩网络程序的方法.那么,什么是可伸缩网络程序呢?可伸缩 ...

  5. [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 （二）

    [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二) Date  周六 10 一月 2015 By 钟谢伟 Category website develop ...

  6. 基于C/S架构的3D对战网络游戏C++框架 _05搭建系统开发环境与Boost智能指针、内存池初步了解

    本系列博客主要是以对战游戏为背景介绍3D对战网络游戏常用的开发技术以及C++高级编程技巧,有了这些知识,就可以开发出中小型游戏项目或3D工业仿真项目. 笔者将分为以下三个部分向大家介绍(每日更新): ...

  7. Azure底层架构的初步分析

    之所以要写这样的一篇博文的目的是对于大多数搞IT的人来说,一般都会对这个topic很感兴趣,因为底层架构直接关乎到一个公有云平台的performance,其实最主要的原因是我们的客户对此也非常感兴趣, ...

  8. CozyRSS开发记录14-RSS源管理初步完工

    CozyRSS开发记录14-RSS源管理初步完工 1.添加源的响应 DialogHost.Show有几个版本的重载,加一个DialogClosingEventHandler参数.我们让添加源对话框的添 ...

  9. 初步了解CPU

    了解CPU By JackKing_defier 首先说明一下,本文内容主要是简单说明CPU的大致原理,所需要的前提知识我会提出,但是由于篇幅我不会再详细讲解需要的其他基础知识.默认学过工科基础课. ...

  10. Windows多线程多任务设计初步（转）

    Windows多线程多任务设计初步 ［前言:］当前流行的Windows操作系统,它能同时运行几个程序(独立运行的程序又称之为进程),对于同一个程序,它又可以分成若干个独立的执行流,我们称之为线程,线程 ...

随机推荐

  1. STM32_RTOS_V2编程模板1-消息队列

    #pragma region QUEUE1 // 1DEFINE osMessageQueueId_t queueDemo1 = NULL; // 2INIT queueDemo1 = osMessa ...

  2. Unity3d中协程的原理，你要的yield return new xxx的真正理解之道

  3. AspNetCore 请求产生 FreeSql 所有操作 SQL 日志输出到前端

    第一步:定义注入类型 public class CurdAfterLog : IDisposable { public static AsyncLocal<CurdAfterLog> Cu ...

  4. 我与 ChatGPT 讨论了面向对象语言 中，关于动态调用的问题

    你好,支持面向对象的语言中,"方法表" 是用来处理什么的? 在面向对象的语言中,"方法表"通常指一个类或对象中定义的方法列表.这些方法定义了该类或对象可以做什么 ...

  5. 详解SLAM中的李群和李代数（上）

    1 概述 最近阅读高翔大神的<视觉SLAM十四讲>这本书,感觉整本书写的非常的平实,用非常接地气的语言毫无保留的介绍了视觉SLAM的相关知识,非常值得一读.不过,在第4章出现的李群和李代数 ...

  6. 操作系统综合题之“请填写信号量值并说明操作结果（正常、阻塞或唤醒。如阻塞或者唤醒，需说明阻塞或者被唤醒的是P1还是P2）(信号量操作流程-代码补充)”

    1.问题:题36表是两个同步进程的模拟执行,生产者将物品放入共享缓冲区供消费者使用,缓冲区可放2件物品,使用2个信号量,并置初值为S1 = 2,S2=0.现已知操作情况,请填写信号量值并说明操作结果( ...

  7. MYSQL的API

    1.函数的使用 常用函数(比较,分组,判断等) 截取函数:substring_index(目标字符串,分隔符,序号) 获取时间函数:TIMESTAMPDIFF(格式,开始时间,结束时间) 2.遇到的问 ...

  8. Python标准库之Collections---Container datatype

    Deques Deques,即 Double-ended-queues,是支持线程安全,内存高效的列表类对象.Deques是可改变的,支持索引等类似于list的操作,然而,我们不能直接对Deques进 ...

  9. UML类图-UML Class Diagram

    .wj_nav { display: inline-block; width: 100%; margin-top: 0; margin-bottom: 0.375rem } .wj_nav_1 { p ...

  10. consul在netcore中发现服务和运行状况检查

    在这篇文章中,我们将快速了解什么是服务发现,使用consul实现一个基本的服务基础设施:使用asp.net核心mvc框架,并使用dns client.net实现基于dns的客户端服务发现. Servi ...