MathJax的基本使用

一、引言

MathJax引擎是一个开源的JavaScript库,它允许Web开发者在网页中嵌入高质量的数学公式。通过利用Web的最新技术,MathJax引擎可以解析LaTeX、MathML和AsciiMath等数学标记语言,并将其渲染为可视化的数学公式,这些公式可以在各种浏览器和操作系统上流畅地显示。

使用MathJax引擎,网页作者可以轻松地编写包含数学内容的文档,而无需担心用户的浏览器或操作系统是否能够正确显示这些数学公式。因为MathJax引擎会自动处理这些兼容性问题,确保用户能够以清晰、准确的方式查看数学内容。

MathJax引擎的特点包括:

  1. 跨平台兼容性:它支持多种浏览器和操作系统,确保数学公式能够在各种设备上正确显示。
  2. 高质量的排版:MathJax引擎使用先进的排版算法,确保数学公式能够以清晰、准确的方式呈现。
  3. 易于使用:通过简单的标记语言,如LaTeX,用户可以轻松地编写数学公式,并将其嵌入到网页中。
  4. 高度可定制性:MathJax引擎提供了丰富的配置选项,允许用户根据自己的需求进行定制,以满足特定的排版和显示要求。

总的来说,MathJax引擎是一个功能强大、易于使用的工具,它为Web上的数学内容显示提供了高质量的解决方案。无论是科学论文、教育资料还是技术文档,都可以利用MathJax引擎来呈现复杂的数学公式,提升网页的可读性和专业性。

 二、使用

1、安装依赖

pnpm i mathjax

2、配置

MathJax = {
  tex: {
    packages: ['base'],        // extensions to use
    inlineMath: [              // start/end delimiter pairs for in-line math
      ['\\(', '\\)']
    ],
    displayMath: [             // start/end delimiter pairs for display math
      ['$$', '$$'],
      ['\\[', '\\]']
    ],
    processEscapes: true,      // use \$ to produce a literal dollar sign
    processEnvironments: true, // process \begin{xxx}...\end{xxx} outside math mode
    processRefs: true,         // process \ref{...} outside of math mode
    digits: /^(?:[0-9]+(?:\{,\}[0-9]{3})*(?:\.[0-9]*)?|\.[0-9]+)/,
                               // pattern for recognizing numbers
    tags: 'none',              // or 'ams' or 'all'
    tagSide: 'right',          // side for \tag macros
    tagIndent: '0.8em',        // amount to indent tags
    useLabelIds: true,         // use label name rather than tag for ids
    maxMacros: 10000,          // maximum number of macro substitutions per expression
    maxBuffer: 5 * 1024,       // maximum size for the internal TeX string (5K)
    baseURL:                   // URL for use with links to tags (when there is a <base> tag in effect)
       (document.getElementsByTagName('base').length === 0) ?
        '' : String(document.location).replace(/#.*$/, '')),
    formatError:               // function called when TeX syntax errors occur
        (jax, err) => jax.formatError(err)
  },
  options: {
    skipHtmlTags: [            //  HTML tags that won't be searched for math
        'script', 'noscript', 'style', 'textarea', 'pre',
        'code', 'annotation', 'annotation-xml'
    ],
    includeHtmlTags: {         //  HTML tags that can appear within math
        br: '\n', wbr: '', '#comment': ''
    },
    ignoreHtmlClass: 'tex2jax_ignore',    //  class that marks tags not to search
    processHtmlClass: 'tex2jax_process',  //  class that marks tags that should be searched
    compileError: function (doc, math, err) {doc.compileError(math, err)},
    typesetError: function (doc, math, err) {doc.typesetError(math, err)},
    renderActions: {...}
  },
  startup: {
    elements: null,          // The elements to typeset (default is document body)
    typeset: true,           // Perform initial typeset?
    ready: Startup.defaultReady.bind(Startup),          // Called when components are loaded
    pageReady: Startup.defaultPageReady.bind(Startup),  // Called when MathJax and page are ready
    document: document,      // The document (or fragment or string) to work in
    invalidOption: 'warn',   // Are invalid options fatal or produce an error?
    optionError: OPTIONS.optionError,  // Function used to report invalid options
    input: [],               // The names of the input jax to use from among those loaded
    output: null,            // The name for the output jax to use from among those loaded
    handler: null,           // The name of the handler to register from among those loaded
    adaptor: null            // The name for the DOM adaptor to use from among those loaded
  },
 svg: {
    scale: 1,                      // global scaling factor for all expressions
    minScale: .5,                  // smallest scaling factor to use
    mtextInheritFont: false,       // true to make mtext elements use surrounding font
    merrorInheritFont: true,       // true to make merror text use surrounding font
    mathmlSpacing: false,          // true for MathML spacing rules, false for TeX rules
    skipAttributes: {},            // RFDa and other attributes NOT to copy to the output
    exFactor: .5,                  // default size of ex in em units
    displayAlign: 'center',        // default for indentalign when set to 'auto'
    displayIndent: '0',            // default for indentshift when set to 'auto'
    fontCache: 'local',            // or 'global' or 'none'
    localID: null,                 // ID to use for local font cache (for single equation processing)
    internalSpeechTitles: true,    // insert <title> tags with speech content
    titleID: 0                     // initial id number to use for aria-labeledby titles
  }
};

tex配置:https://docs.mathjax.org/en/latest/options/input/tex.html#the-configuration-block

startup配置: https://docs.mathjax.org/en/latest/options/startup/startup.html#startup-options

options配置:https://docs.mathjax.org/en/latest/options/document.html#the-configuration-block

svg配置: https://docs.mathjax.org/en/latest/options/output/svg.html#the-configuration-block

 🌰:

$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$
$$P_{价格} =\frac {1/a}{1/a+1/b+1/c}*P_A+\frac{1/b}{1/a+1/b+1/c}*P_B+\frac{1/c}{1/a+1/b+1/c}*P_C$$

 3、基本的LaTeX公式输入

四则运算

加减:a+b-c

a+b-c

乘法: a\times b

a\times b (注意\times和b之间要有空格)

分数: \frac{a}{b}

\frac{a}{b}

使用例: \frac{(a+b)\times c}{(d+e)\times f}

\frac{(a+b)\times c}{(d+e)\times f} 

一个小技巧:对含分式的式子两边加括号 (\frac{a}{b}), \left( \frac{a}{b} \right)

(\frac{a}{b}), \left( \frac{a}{b} \right)
(使用右边的方法效果会更好,可把小括号换成中括号)

比较运算

小于、大于、小于等于、大于等于: <,>,≤,≥

<, >, \leq, \geq (\leq,\geq的记忆:Less,Greater)

等于,不等于: =,≠

=, \not= (实际上,\not 就是那一杠,可运用于其它符号)

恒等于(同余): ≡

\equiv 

幂运算与下标

x^a,但是注意 x^{ab}和 x^ab 的区别:

x^a, x^{ab}, x^ab (多个字符时,要用花括号代替,不过单个字符时有无花括号是等价的)

下标: a_n,但是注意 a_{nm} 和 a_nm的区别:

a_n, a_{nm}, a_nm (花括号原理同上)

根号与多次方根: \sqrt a, \sqrt[n]a, \sqrt[nm]{ab}

\sqrt a, \sqrt[n]a, \sqrt[nm]{ab}

使用例:a_i^2, a^2_i

a_i^2, a^2_i 

集合间的运算

一对花括号(表示集合): \left\{ x_1,x_2 \right\}

\left\{
x_1,x_2
\right\} (不能直接打花括号,必须要有\left\,\right\)
(可以写成一行,这样仅为了方便查看)

属于、包含与真包含: ∈,∉,⊂,⊆,⊃,⊇

\in, \notin, \subset, \subseteq, \supset,\supseteq

交,并,补: \cap, \cup, C_UA, \complement_UA

\cap, \cup, C_UA, \complement_UA

省略号: \cdot, \cdots

\cdot, \cdots (一个点与三个点)

描述法: ∣

\mid

使用例:\left\{ x_1,x_2,\cdots,x_n \right\}, A\cap C_{A\cup B}B=A

\left\{ x_1,x_2,\cdots,x_n \right\},
A\cap C_{A\cup B}B=A

常用特殊函数

三角函数:  \sin x, \cos x, \tan x, \cot x

\sin x, \cos x, \tan x, \cot x (注意中间的空格)

反三角函数:  \arcsin, \arccos, \arctan ,\textrm{arccsc}, \textrm{arcsec},\textrm{arccot},\sin^{-1}\,cos^{-1},\tan^{-1},\sinh^{-1},\cosh^{-1},\tanh^{-1}

\arcsin x, \arccos x, \arctan x (事实上许多特殊函数都可以在前面加'\')

双曲函数:\sinh x, \cosh x, \tanh x, \coth x

\sinh x, \cosh x, \tanh x, \coth x

对数: \log_ax, \ln x, \lg x

\log_ax, \ln x, \lg x

用希腊字母表示的函数见下方“常用希腊字母”。

常用特殊符号

求和: \sum, \sum_{i=1}^n, \sum_{i=1}^na_i, \sum_{i=1}^{na_i}

\sum, \sum_{i=1}^n, \sum_{i=1}^na_i, \sum_{i=1}^{na_i}

无穷: ∞,+∞,−∞

\infty, +\infty, -\infty

箭头: →,←,↑,↓

\rightarrow, \leftarrow, \uparrow, \downarrow

极限: \lim, \lim_{x\rightarrow 0}, \lim_{x\rightarrow \infty}

\lim, \lim_{x\rightarrow 0}, \lim_{x\rightarrow \infty}

定积分与不定积分:\int, \int_a^b, \int_{ab}^{cd}

\int, \int_a^b, \int_{ab}^{cd}

二重积分: \iint, \iint_D

\iint, \iint_D

三重积分:\iiint, \iiint_D

\iiint, \iiint_D (以此类推,超过四重的积分不可用)

定积分使用例:\int_a^b \left( -\frac{1}{x^2} \right) dx = \frac{1}{x}|_a^b = \frac{1}{b} - \frac{1}{a}

\int_a^b \left( -\frac{1}{x^2} \right) dx = \frac{1}{x}|_a^b = \frac{1}{b} - \frac{1}{a}

偏导: ∂

\partial

梯度(Gradient): ∇

\nabla

常用希腊字母

阿尔法,贝塔,伽马:\alpha, \beta, \gamma

\alpha, \beta, \gamma

Gamma函数: Γ

\Gamma

变化量: Δ

\Delta

epsilon:\epsilon

\epsilon (但是总感觉平时好像用的是\xi?)

Zeta函数:\zeta

\zeta

机械效率: \eta

\eta

常数lambda: \lambda

\lambda

数学期望,摩擦系数mu:\mu

\mu

圆周率pi: \pi

\pi

极径: \rho

\rho

标准差、方差sigma:\sigma

\sigma

力矩,逆序数: \tau

\tau

欧拉函数phi: \phi, \Phi

\phi, \Phi

卡方分布: \chi

\chi (卡方分布的英文名是Chi-Square Distribution)

电阻,欧米茄:\omega, \Omega

\omega, \Omega

多行公式

换行: a \\ b, c \\ d

a \\ b, c \\ d ('\\'是换行)

对齐:

\begin{aligned} [(n+1)!+k]\operatorname{mod}k &=(n+1)!\operatorname{mod}k+k\operatorname{mod}k \\ &=0+0 \\ &=0 \end{aligned}

\begin{aligned}
[(n+1)!+k]\operatorname{mod}k &=(n+1)!\operatorname{mod}k+k\operatorname{mod}k
\\ &=0+0
\\ &=0
\end{aligned}
('&'是对齐)

方程组: \begin{cases} x_1+x_2=2 \\ x_1-x_2=0 \end{cases}

\begin{cases}
x_1+x_2=2
\\ x_1-x_2=0
\end{cases}

空格: a \ b

a \ b ('\ '表示一空格)

矩阵与行列式:\left( \begin{matrix} a &b \\c &d \end{matrix} \right) , \left| \begin{matrix} a &b \\c &d \end{matrix} \right|

\left(
\begin{matrix}
a &b
\\c &d
\end{matrix}
\right)
,
\left|
\begin{matrix}
a &b
\\c &d
\end{matrix}
\right|
(\left,\right后的符号可替换)

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/534083.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【智能制造-1】涂胶解决方案

平面或立体转角处的等距点胶&#xff0c;既是技术上的难点也是实现上的痛点。 如何更好地保证拐角点胶的均匀性&#xff1f; 1、位置同步输出算法&#xff08;PSO&#xff09;&#xff1a;可以在点胶阀设定频率不变的情况下实现恒速等距点胶&#xff0c;完美解决拐角堆胶问题…

jsonpath在线解析器网址

jsonpath在线解析器网址&#xff1a;https://jsonpath.com/

梦想CAD 在线编辑软件

前言 有用户集成网页CAD之后&#xff0c;需要提取图纸的各种信息和数据&#xff0c;下面我们讲一下Web版CAD如何在前端直接提取修改和转换后的图纸信息&#xff0c;没有集成过在线CAD的小伙伴可以先看一下快速入门&#xff08;https://help.mxdraw.com/?pid32&#xff09; 在…

Vue2.x实现商城购物车

1.实现购物车页面 在页面中显示购物车中的商品信息&#xff0c;并能进行数量增减及商品删除操作&#xff0c;购物车中金额也随商品数量的变化而变化 2.创建cart.html页面 创建cart.html页面&#xff0c;在其中创建Vue实例&#xff0c;实例中首先准备一些商品信息以供显示&a…

逆向入门:为CTF国赛而战day05day06

用的汉化版的 昨天做了一道题目&#xff0c;然后下了那个apkide改之理,就没了 今天再来一题。 我发现&#xff1a;ascii表要好好学。这里#号是35就被写到题目里去了。 CTF reverse 不一样的flag_ctf reverse flag.bin-CSDN博客

云原生技术:开启你的数字王国

在科技领域的飞速进步中&#xff0c;云计算已经成为了现代企业和个人不可或缺的技术。在这股云计算的热潮中&#xff0c;"云原生"这一概念正逐步成为焦点。云原生的话题越来越普及&#xff0c;无论是在日常生活中还是在专业工作场合&#xff0c;这个术语都频繁出现。…

1. VirtualBox安装CentOS

安装 VirtualBox 地址:https://www.virtualbox.org/wiki/Downloads 版本: 6.1和7.0+版本都可以 安装: windows上安装需要admin权限,右键菜单选中 “Run as administrator” 安装 CentOS 6.10 地址:https://vault.centos.org/6.10/isos/x86_64/ 版本: 如果不需要GUI,选择…

无人新零售引领的创新浪潮

无人新零售引领的创新浪潮 在数字化时代加速演进的背景下&#xff0c;无人新零售作为商业领域的一股新兴力量&#xff0c;正以其独特的高效性和便捷性重塑着传统的购物模式&#xff0c;开辟了一条充满创新潜力的发展道路。 依托人脸识别、物联网等尖端技术&#xff0c;无人新…

8.排序(直接插入排序、希尔排序、选择排序、堆排序、冒泡排序、快速排序、归并排序)的模拟实现

1.排序的概念及其运用 1.1排序的概念 排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。 稳定性&#xff1a;假定在待排序的记录序列中&#xff0c;存在多个具有相同的关键字的记录…

node.js-入门

定义 Node.js是一个跨平台Javascript运行环境&#xff0c;使开发者可以搭建服务器端的Javascript应用程序 作用&#xff1a;使用Node.js编写服务器端程序 1&#xff09;编写数据接口&#xff0c;提供网页资源浏览功能等 2&#xff09;前端工程化&#xff1a;为后续学习Vue和…

DSP笔记8-通用GPIO

电源类 AD引脚类 系统相关JTAG 时钟 GPIO (general purpose input output)复用&#xff0c; 复用&#xff0c;I/O引脚&#xff0c;外设的功能引脚&#xff0c; 88个GPIO引脚&#xff0c;通用的输入输出口&#xff0c;功能复用的。 GPIO特点 输入电平与TTL电平兼容。>2.0V…

记一次IP访问MySQL失败多次被自动锁定导致无法连接问题,解决方法一条SQL足以。

&#x1f469;&#x1f3fd;‍&#x1f4bb;个人主页&#xff1a;阿木木AEcru &#x1f525; 系列专栏&#xff1a;《Docker容器化部署系列》 《Java每日面筋》 &#x1f4b9;每一次技术突破&#xff0c;都是对自我能力的挑战和超越。 前言 今天下午还在带着耳机摸鱼&#xff…

企业售后技术支持如何管理?远控行为如何追溯?

随着企业业务规模的不断扩大&#xff0c;远程技术支持需求自然会不断增加&#xff0c;在这个环节中就尤其容易出现管理上的缺位&#xff0c;进而造成不必要的客诉纠纷&#xff0c;影响品牌形象。 在这样的客观环境下&#xff0c;原始的“小作坊”式管理显然已经不再合适&#…

Vue3 使用ElementUI 显示异常

element提供的样例不能正常显示&#xff0c;需要进行配置 1.npm install element-plus --save 2.main.js // main.ts import { createApp } from vue import ElementPlus from element-plus //全局引入 import element-plus/dist/index.css import App from ./App.vue const …

Python程序设计 字符类型及其操作

1. 提取身份证号性别 通过身份证的第17位也就是倒数第二位的数字可以辨别该身份证所属人的性别,奇数为男性,偶数为女性。 输入身份证号&#xff0c;第17位若是偶数&#xff0c;输出性别女&#xff0c;否则输出性别男 1.通过input()函数接收用户输入的身份证号&#xff0c;将其…

API管理平台:你用的到底是哪个?

Apifox是不开源的&#xff0c;在github的项目只是readme文件&#xff0c;私有化需要付费。当然saas版目前是免费使用的。 一、Swagger 为了让Swagger界面更加美观&#xff0c;有一些项目可以帮助你实现这一目标。以下是一些流行的项目&#xff0c;它们提供了增强的UI和额外的功…

.NET邮箱API发送邮件的流程?如何使用API?

.NET邮箱API发送邮件需要哪些步骤&#xff1f;怎么配置API发信&#xff1f; 电子邮件已经成为我们日常工作和生活中不可或缺的一部分。对于开发人员来说&#xff0c;掌握如何使用API发送邮件是一项非常实用的技能。AokSend将详细介绍使用.NET邮箱API发送邮件的流程&#xff0c…

Oracle ORA-28547:connection to server failed,probable Oracle Net admin error

使用Navicat连接oracle数据库时报ORA-28547错误 因为Navicat自带的oci.dll并不支持oracle11g&#xff0c;需要去官网下载支持的版本。 1.去oracle下载对应的oci.dll文件 下载地址&#xff1a;Oracle Instant Client Downloads 可以用 11.2.0.4 2. 复制刚下载下来的instant…

Linux进阶篇:firewalld详解——firewalld 的概念作用以及如何使用

Linux firewalld详解——firewalld 的概念&作用以及如何使用 在这篇文章中&#xff0c;我们将详细介绍Linux系统中的firewalld&#xff0c;它是一款强大的防火墙管理工具。我们将介绍firewalld的基本概念和作用&#xff0c;并通过实例演示如何使用它来保护您的系统。 一、…

轻松记录收支明细,支持查看所有记录并统计某个账户的开销,轻松掌握开销明细

在繁忙的现代生活中&#xff0c;我们时常为琐碎的开销所困扰&#xff0c;难以清晰掌握自己的财务状况。为了帮助你更好地管理个人财务&#xff0c;我们推出了一款全新的智能收支记录工具&#xff0c;让你轻松记录每一笔开销&#xff0c;并实时统计账户信息&#xff0c;从此告别…