安装和使用

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. MySQL获取周、月、天日期，生成排序号

    常用MySQL生成时间序列 --生成最近七天的日期,不包括当天 SELECT @cdate := date_add(@cdate, interval - 1 day) as date FROM(SEL ...

  2. DAY1--ROS基本认知

    1.ROS基本框架 ROS架构如下图所示,可以将其分为三个层次:OS层.中间层和应用层. 1.1 应用层 应用层是用户直接交互的部分,包含以下核心组件: Master: ROS的核心协调者,负责节点( ...

  3. eolinker校验规则之正则匹配：返回结果校验的方法和案例（正则校验）

    如上图红色箭头,需要校验返回值内是否包含"创建满足条件的优惠券"这一内容 如果需要满足以上校验,最好的方法就是使用正则进行匹配 切换到正则匹配,输入需要校验的内容,即可实现正则匹配 ...

  4. 智能简历解析器实战教程：基于Spacy+Flask构建自动化人才筛选系统

    一.项目背景与技术选型 在人力资源领域,每天需要处理数百份简历的HR团队面临巨大挑战:人工筛选效率低下.关键信息遗漏风险高.跨文档对比分析困难.本教程将构建一个端到端的智能简历解析系统,通过NLP技术 ...

  5. Cgroup之内存子系统

    Memory 子系统主要完成两件事: (1)控制一组进程使用内存资源的行为: (2)统计 cgroup 内进程使用内存资源的信息.在实际业务场景中,主要是为了避免某些应用大量占用内存资源(可能是由于内 ...

  6. .Net Core全局的json配置

    .Net Core全局的json配置 参照文档: 怎样将枚举展示成字符串类型:https://code-maze.com/csharp-serialize-enum-to-string/ 全局配置:a ...

  7. 通过PHP实现获取访问用户IP

    在php中自带了一个非常的简单的获取IP地址的全局变量,很多初学都获取IP都使用它了,但是对于这些我们一般用法是满足了,但是对于要求高精度这个函数还是不行的. 这个是最简单的方法,对于开了透明代理之类 ...

  8. Java Factory工厂模式

    /** * 工厂类:用于连接接口和子类,尽量减少客户端的复杂性 * 2017-08-25 * @author Junwei Zhu * */ interface Fruit { public void ...

  9. FastAPI与Tortoise-ORM开发的神奇之旅

    title: FastAPI与Tortoise-ORM开发的神奇之旅 date: 2025/05/05 00:15:48 updated: 2025/05/05 00:15:48 author: cm ...

  10. 【代码】Android｜判断asserts下的文件存在与否，以及普通文件存在与否

    作者版本:Android 11及以上 主要是发现网上没有完整的.能跑的代码,不知道怎么回事,GPT给我重写的.我只能保证这个代码尊嘟能跑,不像其他的缺胳膊少腿的. asserts 贴一下结果: boo ...