安装和使用

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. 附043.KubeEdge边缘云部署实施方案

    目录 KubeEdge介绍 KubeEdge概述 KubeEdge优势 KubeEdge架构 KubeEdge部署 部署依赖 部署规划 主机名配置 变量准备 互信配置 环境预配置 安装keadm 设置 ...

  2. 匿名内部类、lambda匿名函数表达式

    a.匿名内部类的定义格式: 接口名称 对象名 = new 接口名称(){ //覆盖重写所有抽象方法 }: 一. /** * lambda匿名函数的使用 * Lambda省去面向对象的条条框框,格式由3 ...

  3. windows10 激活教程

    1.环境 适用对象:VL版本的windows OEM版本请使用文末工具激活 1.1查询自己电脑版本 [win+R]->输入[slmgr /dlv]->查看[产品密钥通道] slmgr /d ...

  4. 解决github页面打不开 页面加载慢，注册不了显示Unable to verify your captcha response...

    解决国内打开Github页面.注册等问题 下列方法可以解决: github网站页面打不开: github页面打开慢,偶尔打不开,部分页面链接也打不开: 注册不了github账号,找回密码失败等,显示U ...

  5. 【完结】【一本通提高】2025dsfzB哈希和哈希表做题笔记

    2025年dsfz - 上学期B层字符串哈希专题做题笔记 笔记部分请看我的字符串哈希学习笔记 题目编号 标题 估分 正确 提交 Y 2066 Problem  A [一本通提高篇哈希和哈希表]乌力波( ...

  6. php 常用bc函数

    bcadd - 加法,2个任意精度数字的加法计算bcsub - 减法bcmul - 乘法bcdiv - 除法bcpow - 乘方bcmod - 取模bcsqrt - 求二次方根bccomp - 比较两 ...

  7. C# 线程（一）——基础概念（线程与进程、前后台线程）

    一.基础概念 1.1线程与进程 线程--是一个可执行路径,它可以独立于其他线程执行. 进程--每个线程都在操作系统的进程(Process)内执行,而操作系统则提供了程序运行的独立环境,它提供了一个应用 ...

  8. STM32操作GPIO外设（点亮LED灯）的两种方式——使用官方库函数或直接操作寄存器

    STM32操作外设(点亮LED灯)的两种方式 准备工作: 硬件gec6818开发板.搭载stm32f407zet6芯片 keil项目模板,准备好官方库函数 官方提供的<STM32f407数据手册 ...

  9. 使用 Go-Spring 构建最小 Web API

    前言 Go 语言以简单著称,一个很明显的例子就是只需要很少的代码即可实现一个最小的 Web API .Go-Spring 融合了 Go 简单和 Spring 自动配置的优点.本文通过几个实现最小 We ...

  10. Queue接口分析

    一.Queue是什么 该接口时Java集合框架成员 Queue: 通常(但不一定)队列就是一个先入先出(FIFO)的数据结构,和堆一样(但可以进行转换,比如优先级列队排序,又或者改为栈形式的后进先出数 ...