您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

MathJax的基本使用

时间:2020-05-04 09:52:43  来源:  作者:

MathJax是一个开放源代码的JAVAScript显示引擎,适用于所有现代浏览器中的LaTeX、MathML和AsciMath表示法。

MathJax官网为 https://www.mathjax.org 其开源文档地址为 https://github.com/mathjax

Mathjax使用基于网络字体来生成高质量的排版,这种排版可以达到完全分辨率,数学是基于文本的,而不是基于图像的,因此它可以用于搜索引擎,参考下图的微分方程,过去我们只能把公式做成图片,现在可以用LaTex文字实现。LaTex主要用于排版里。

MathJax的基本使用

 

(1)引入Mathjax

因为MathJax是基于网络字体生成公式,其内带字体比较大,所以,通常推荐使用CDN网络分发进行加载。国外用户基本上使用Jsdelivr

<script id="MathJax-script" <strong>async</strong> src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

  如果是国内用户推荐使用Bootcdn

<script   id="MathJax-script" async src="https://cdn.bootcss.com/mathjax/3.0.5/es5/
tex-mml-chtml.js"></script>

 如果你想从本地加载,开源下载一个Release版本。

https://github.com/mathjax/MathJax/archive/master.zip

  如果你想本地调试器源代码,可以下载Source Code

https://github.com/mathjax/MathJax-src/archive/master.zip

 

在上面代码里,script里使用了async用于异步加载。id默认为MathJax-script。

 

(2)加载Mathjax不同的模块

Mathjax 3.0版本和2.0版本差距非常大,3.0版本开始采用模块化开发,在2.0版本里你需要加载所有的JS,但是在3.0版本里,你可以按需加载。

3.0里包含了一些核心组件组件,这些组件是Mathjax运行所必须的,除此以外,你可以按需加载你所需要的模块,

例如如果你是制作数学公式可以只加载数学模块, 你是制作文本排版的可以只加载排版模块。

基本上Mathjax默认包含了8个加载模块。

tex-chtml

tex-chtml-full

tex-svg

tex-svg-full

tex-mml-chtml

tex-mml-svg

mml-chtml

mml-svg

 它们都至少包括一个输入input处理器、一个输出output处理器、MathJaxTex所需要的字体、上下文菜单和启动模块。

tex-chtml 会加载 ams, newcommand, require, autoload, configmacros, 和 noundefined。这意味着大部分情况下能满足你基本需求。你也可以使用 require 自己加载更多模块。

tex-chtml-full 会包含tex-chtml的内容,同时还包括input/tex-full 等但是不包含 physics 和 colorV2

tex-svg mathjax默认以字体输出公式,如果你需要是svg输出公式,请使用svg包。

tex-svg-full:包含全部以svg输出格式。

tex-mml-chtml(常用):包含了对MathML 语言的支持,显示时以字体方式显示。

tex-mml-svg:包含了对MathML 语言的支持,显示时以svg方式显示。

mml-chtml 不包含Tex,支持MathML,以文字显示。mml-svg:不包含Tex,以SVG方式显示。

 

(3)输入组件

目前MathJax支持三种输入组件:

 

input/tex

input/mathml

input/asciimath

tex:支持tex和Latex输入

mathml:支持math ml输入。

asciimath:支持 asciimath 输入

 

(4)理解输入和输出

现在,引入mathjax,然后写一段HTML代码

MathJax的基本使用

 

打开浏览器看到效果如下

MathJax的基本使用

 

 

如何理解输出是文本还是SVG?

从用户的角度看,基本上一样的,但是在浏览器渲染方面则采用不同的渲染模式。

下图显示以文本输出数学公式,此时,Mathjax自定义了很多HTML5的自定义标签 如 <mjx-mo>, <mjx-num>,。

在HTML5里出了我们常用的 div, span, a, h1 等标签外,还允许开发人员自定义浏览器标签,但是自定义标签按照约定必须以“-”分割,例如,你也可以自定义标签:<abc-xx></abc-xx>,但是不推荐用 <abcxx></abcxx>,这主要是为了方便浏览器解析,防止和现有的标签冲突等。

Mathjax通过自定义标签,然后给标签设置class属性,利用字体显示字符,所以你看到“b”不是字母“b”,而是一个矢量图形。

 

MathJax的基本使用

 

 

Mathjax为每个字符制作了一个字体,这样利用字体显示公式,字体美观,即使再放大也不失真。

MathJax的基本使用

 

在公式上,选择SVG输出。

MathJax的基本使用

 

则系统用svg显示公式。此时,如果查看浏览器的HTML代码,则如下图SVG方式。

 

MathJax的基本使用

 

 

(5)配置Mathjax

默认情况下,MathJax 使用 ( 和 ) 作为行内公式的开始和结束(类似 span)。 使用

[和] 作为段落的开始和结束(类似 div)

但是,你也可以自定义配置,如下使用 和和作为公式的开始和结束。

但是,不推荐使用是因为,是因为,是美元符号,这会导致 “这个苹果5元,那个苹果5元,那个苹果6元”,结果系统把$之间的内容当成了公式了。

请注意:和其它系统不同,对于Mathjax的配置,是直接定义一个MathJax对象,然后设置其属性。

<script>

MathJax = {

  tex: {

    inlineMath: [['$', '$'], ['\(', '\)']]

  }

};

</script>

<script id="MathJax-script" async

  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">

</script>

  

(6)一些重要配置

MathJax提供了非常强大的配置参数。下面是一些配置。

 

MathJax = {

  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: {...}

  }

};

  

skipHtmlTags配置可以让Mathjax忽略一些标签,例如当你用 <code> 包含一些公式时,可能希望MaxJax不把其中的公式进行解析。

includeHtmlTags 可以配置在数学公式里可以出现哪些标签,例如公式里出现 n可用于换行等。

ignoreHtmlClass:可以设置忽略一些class

processHtmlClass:可以设置处理class。

 

我们提供了一个demo。http://demo.dotnetcms.org/math/math/

在这个demo里,插入数学公式时使用了如下配置:

let className = 'math-tex';
 
MathJax = {
  options: {
    processHtmlClass: className,
    ignoreHtmlClass: '.*'
  }
};

  也就是只处理 class为 math-tex 的标签。



Tags:MathJax   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
MathJax是一个开放源代码的JavaScript显示引擎,适用于所有现代浏览器中的LaTeX、MathML和AsciMath表示法。MathJax官网为 https://www.mathjax.org 其开源文档地址为 https:/...【详细内容】
2020-05-04  Tags: MathJax  点击:(76)  评论:(0)  加入收藏
▌简易百科推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === &#39;a&#39;) { b = true} else { b = false}// goodb = a === &#39;a&#39;2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(6)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(20)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(23)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(35)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(36)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  V面包V    Tags:Javascript   点击:(40)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== &#39;&#39;) { let username = username1; }优化后...【详细内容】
2021-10-28  前端掘金    Tags:JavaScript   点击:(51)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  前端达人    Tags:JS   点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  羲和时代    Tags:JS   点击:(58)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条