当前位置: 首页 > news >正文

KaTeX.js渲染数学公式

什么是KaTeX.js ?

KaTeX 是一个集成速度快且功能丰富的数学公式渲染库,专为 Web 设计。它由 Khan Academy 开发,提供接近印刷品质的数学公式展示,同时保持与浏览器的高效互动性。KaTeX 特点包括快速渲染速度、高质量的输出、独立运行、跨平台兼容以及丰富的功能集。它支持服务器端渲染,可以预渲染公式并作为纯 HTML 发送,减轻客户端负担。

入门示例

作为入门演示示例,下载源码到本地方式引入 KaTex

<!-- 引入样式和库文件 -->
<link rel="stylesheet" href="../libs/katex.css" />
<script src="../libs/katex.js"></script>

创建容器 DOM 元素,绑定 equation ID 选择器

<div id="equation">$`x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}`$</div>
<script type="text/javascript" defer>// 使用KaTeX渲染指定元素中的公式katex.render(`x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}`, document.getElementById('equation'))
</script>

效果

图片

 高级示范


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用KaTeX显示数学公式</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css"><script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/auto-render.min.js"onload="renderMathInElement(document.body);"></script><script>function change() {var textarea = document.getElementById('xxx');console.log(textarea)//textarea.value = textarea.value.replace(/(\$|\n)E = mc^2(\$|\n)/g, '$\\text{E} = mc^2$');textarea.textContent="解:已知$$a-b=2$$,$$\therefore   \dfrac{{(1-a)}^{2}}{b}-\dfrac{{(1+b)}^{2}}{a}=\dfrac{a{(1-a)}^{2}-b{(1+b)}^{2}}{ab}=\dfrac{a-{a}^{3}-b+{b}^{3}}{ab}$$ 即$$10ab=2-4ab$$,解得$$ab=\dfrac{1}{7}$$,$$\therefore   {a}^{3}-{b}^{3}=2-4ab=2-4\times \dfrac{1}{7}=\dfrac{10}{7}.$$";//textarea.setAttribute('text', "$$E = mc^2$$");renderMathInElement(textarea);}</script>
</head>
<body><h1>使用KaTeX显示数学公式</h1><p>下面是一些数学公式的示例:</p><p>by https://zhengkai.blog.csdn.net/</p><p>下面是一些数学公式的示例:</p><p>行内公式示例:这是一个行内公式 $$E = mc^2$$。</p><p>块级公式示例:</p><p>$$\int_a^b f(x) \, dx = F(b) - F(a)$$</p><a id="xxx"></a><textarea cols="80" id="2"></textarea><a onclick="change()">change</a>
</body>
</html>

附加:document.getElementById如何改变a标签的文本

在JavaScript中,如果你想通过document.getElementById来改变一个<a>标签的文本,你可以这样做:

  1. 首先,确保你的<a>标签有一个id属性,这样你才能通过document.getElementById来选中它。
<a id="myLink" href="https://example.com">原始文本</a>
  1. 然后,使用document.getElementById来获取这个<a>标签的引用。

  2. 接着,你可以通过修改innerTexttextContent属性来改变它的文本内容。

// 获取<a>标签
var link = document.getElementById('myLink');// 修改文本
link.innerText = '新的文本';
// 或者
link.textContent = '新的文本';

innerTexttextContent都可以用来改变元素的文本内容,但它们之间有一些细微的差别:

  • innerText会考虑CSS的visibilitydisplay属性,如果元素是不可见的或不显示的,那么innerText不会返回文本内容。
  • textContent会返回元素及其子元素的全部文本内容,不考虑CSS样式的影响。

通常情况下,使用textContent就足够了,因为它更简单且不受CSS样式的影响。

自动渲染

使用 JavaScript 手动渲染还是稍微麻烦了一点,官方提供 auto-render 自动渲染扩展,通过简单的引入可以实现自动渲染。

// 引入 auto-render.js 
<script src="../libs/auto-render.js"></script>
<script type="text/javascript" defer>document.addEventListener('DOMContentLoaded', function () {renderMathInElement(document.body, {// 自定义选项// • auto-render 指定解析格式delimiters: [{ left: '$$', right: '$$', display: true },{ left: '$', right: '$', display: false },{ left: '\\(', right: '\\)', display: false },{ left: '\\[', right: '\\]', display: true },],// • 不抛出异样,而是渲染公式源码throwOnError: false,})})
</script>

auto-render 扩展可以在页面加载时自动查找并渲染所有使用 $...$ 和 $$...$$ 包裹的公式。意味着你不需要手动调用任何函数来渲染这些公式。

KaTeX 允许调整样式,例如修改 .katex 类的 font-size 属性来改变公式的显示大小。此外,KaTeX 提供了多个扩展,如 copy-tex 扩展允许复制 LaTeX 代码,而 mhchem 扩展简化了化学方程式的编写。

官方链接

[1] Github Star: 18.1k: https://github.com/KaTeX/KaTeX
[2] 官网: https://katex.org/
[3] 地址: https://katex.org/docs/libs

 

相关文章:

KaTeX.js渲染数学公式

什么是KaTeX.js ? KaTeX 是一个集成速度快且功能丰富的数学公式渲染库&#xff0c;专为 Web 设计。它由 Khan Academy 开发&#xff0c;提供接近印刷品质的数学公式展示&#xff0c;同时保持与浏览器的高效互动性。KaTeX 特点包括快速渲染速度、高质量的输出、独立运行、跨平…...

算法训练营打卡Day19

目录 1.二叉搜索树的最近公共祖先 2.二叉树中的插入操作 3.删除二叉搜索树中的节点 题目1、二叉搜索树的最近公共祖先 力扣题目链接(opens new window) 给定一个二叉搜索树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有…...

H.264编解码工具 - FFmpeg

一、简介 FFmpeg是一款用于处理多媒体数据的开源软件,可以完成音频、视频和多媒体流的编解码、转码、解码、录制、流媒体播放等功能。它提供了丰富的命令行工具和库函数,适用于各种平台和操作系统。 FFmpeg支持多种常见的音视频格式,包括MP3、WAV、FLAC、MP4、AVI、MKV等。它…...

60 序列到序列学习(seq2seq)_by《李沐:动手学深度学习v2》pytorch版

系列文章目录 文章目录 系列文章目录一、理论知识比喻机器翻译Seq2seq编码器-解码器细节训练衡量生成序列的好坏的BLEU(值越大越好)总结 二、代码编码器解码器损失函数训练预测预测序列的评估小结练习 一、理论知识 比喻 seq2seq就像RNN的转录工作一样&#xff0c;非常形象的比…...

elementPlus的tree组件点击后有白色背景

在使用elementPlus的tree组件时&#xff0c;需要对它进行样式的重写&#xff0c;下面是相关代码 <script setup> import { ref } from vue const data [{label: Level one 1,children: [{label: Level two 1-1,children: [{label: Level three 1-1-1}]}]},{label: Leve…...

【Git】Git在Unity中使用时的问题记录

个人向笔记。 &#xff08;为什么没截图&#xff0c;因为公司电脑没法截图&#xff01;&#xff09; 1 前言 主要记录在使用Git协同开发时的各种问题&#xff0c;方便以后查阅。 2 记录 2.1 合并冲突 git pull下来后直接给合并了&#xff0c;麻了。若不想直接合并应该先把分…...

python学习记录6

&#xff08;1&#xff09;循环嵌套 可以将一个循环语句所属的语句块也可以是一个完整的一个循环语句&#xff0c;一般嵌套不应该超过3层。 嵌套可以是while-while、for-for,也可以是while-for。 基本图形输出&#xff1a;正方形&#xff0c;直角三角形 #输入一个数字n&…...

MongoDB 的基本使用

目录 数据库的创建和删除 创建数据库 查看数据库 删除数据库 集合的创建和删除 显示创建 查看 删除集合 隐式创建 文档的插入和查询 单个文档的插入 insertOne insertMany 查询 嵌入式文档 查询数组 查询数组元素 为数组元素指定多个条件 通过对数组元素使…...

数据揭秘:分类与预测技术在商业洞察中的应用与实践

分类与预测&#xff1a;数据挖掘中的关键任务 在数据挖掘的广阔天地中&#xff0c;分类与预测就像是一对互补的探险家&#xff0c;它们携手深入数据的丛 林&#xff0c;揭示隐藏的宝藏。 一、分类&#xff1a;数据的归类大师 分类是一种将数据点按照特定的属性或特征划分到不…...

学MybatisPlus

1.设置MySql的数据库 spring:datasource:url: jdbc:mysql://127.0.0.1:3306/mp?useUnicodetrue&characterEncodingUTF-8&autoReconnecttrue&serverTimezoneAsia/Shanghaidriver-class-name: com.mysql.cj.jdbc.Driverusername: rootpassword: MySQL123 logging:l…...

如何使用工具删除 iPhone 上的图片背景

在 iPhone 上删除背景图像变得简单易行。感谢最近 iOS 更新中引入的新功能。如今&#xff0c;iOS 用户现在可以毫不费力地删除背景&#xff0c;而无需复杂的应用程序。在这篇文章中&#xff0c;您将学习如何使用各种方法去除 iPhone 上的背景。这可确保您可以选择最适合您偏好的…...

软件工程-数据流图

数据流图(Data Flow Diagram&#xff0c;DFD)是一种图形化技术&#xff0c;它描绘信息流和数据从输入移动到输出的过程中所经受的变换。 数据流图的设计原则 数据守恒原则&#xff0c;对于任何一个加工来说&#xff0c;其所有输出数据流中的数据必须能从该加工的输入数据流中…...

链式前向星(最通俗易懂的讲解)

链式前向新&#xff1a;用于存储图的 边集 数组 前言 当我们存储图的时候&#xff0c;往往会使用 邻接矩阵 或是 邻接表。 邻接矩阵 好写&#xff0c;但太浪费空间&#xff0c;节点一多就存不下&#xff1b; 邻接表 效率高&#xff0c;但涉及指 &#xff0c;不好写容易出错…...

【C++设计模式】(四)创建型模式:简单工厂模式,工厂方法模式,抽象工厂模式

文章目录 &#xff08;四&#xff09;创建型模式&#xff1a;简单工厂模式&#xff0c;工厂方法模式&#xff0c;抽象工厂模式简单工厂模式工厂方法模式抽象工厂模式 &#xff08;四&#xff09;创建型模式&#xff1a;简单工厂模式&#xff0c;工厂方法模式&#xff0c;抽象工…...

浅析Golang的Context

文章目录 1. 简介2. 常见用法2.1 控制goroutine的生命周期&#xff08;cancel&#xff09;2.2 传递超时&#xff08;Timeout&#xff09;信息2.3 传递截止时间&#xff08;Deadline&#xff09;2.4 传递请求范围内的全局数据 &#xff08;value&#xff09; 3 特点3.1 上下文的…...

生日礼物C++代码

#include<bits/stdc.h> using namespace std; string s; int a,b; int main(){cout<<" 生日之地"<<\n;cout<<" 1.开始游戏"<<" 2.不想开始"<<\n;cin>>a;if(a1||a2){if(a2)cout<<…...

使用python基于DeepLabv3实现对图片进行语义分割

DeepLabv3 介绍 DeepLabv3 是一种先进的语义分割模型&#xff0c;由 Google Research 团队提出。它在 DeepLab 系列模型的基础上进行了改进&#xff0c;旨在提高图像中像素级分类的准确性。以下是 DeepLabv3 的详细介绍&#xff1a; 概述DeepLabv3 是 DeepLab 系列中的第三代…...

【漏洞复现】泛微OA E-Office do_excel.php 任意文件写入漏洞

》》》产品描述《《《 泛微0-0fice是一款标准化的协同 OA办公软件&#xff0c;泛微协同办公产品系列成员之一,实行通用化产品设计&#xff0c;充分贴合企业管理需求&#xff0c;本着简洁易用、高效智能的原则&#xff0c;为企业快速打造移动化、无纸化、数字化的办公平台。 》》…...

算法(食物链)

240. 食物链 题目 动物王国中有三类动物 A,B,C&#x1d434;,&#x1d435;,&#x1d436;&#xff0c;这三类动物的食物链构成了有趣的环形。 A&#x1d434; 吃 B&#x1d435;&#xff0c;B&#x1d435; 吃 C&#x1d436;&#xff0c;C&#x1d436; 吃 A&#x1d434;。…...

ubuntu20.04系统安装zookeeper简单教程

Ubuntu系统中安装和配置Zookeeper的完整指南 Apache Zookeeper是一个开源的分布式协调服务&#xff0c;广泛用于分布式应用程序中管理配置、提供命名服务、分布式同步以及组服务等。在本教程中&#xff0c;我们将详细介绍如何在Ubuntu系统中安装Zookeeper&#xff0c;并进行相关…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...