mathjax组件入门

mathjax允许您在web页面中包含数学,可以使用latex、mathml或ascimath表示法,数学将使用javascript处理以生成html或svg,以便在任何现代浏览器中查看。

mathjax组件

为了使在web页面中使用mathjax更加容易,组成mathjax的各个部分被打包成称为“组件”的单独文件。例如,有一个用于mathml输入的组件和一个用于svg输出的组件,并且各种tex扩展打包为单独的组件。您可以混合和匹配各种组件来定制mathjax,以满足您的特殊需要(在 配置mathjax 下面);您指定的各个组件文件在mathjax启动时加载。

还有一些组件将其他几个组件合并到一个较大的文件中,同时加载运行mathjax所需的所有内容。它们代表了输入和输出格式的一些标准组合,您可能会发现其中一种适合您的需要。你可以 configure 各种组件,以便自定义它们的运行方式,即使它们是作为组合组件的一部分加载的。例如,无论tex组件是单独加载的,还是作为 tex-chtml 组件。

您甚至可以创建自己的mathjax组件或自定义构建,或者将mathjax组件合并到包含网站可能需要的其他资产的较大文件中(请参见 定制mathjax构建 了解更多详细信息)。


访问mathjax的方法

访问mathjax以包含在web页面中有两种方法:链接到内容交付网络(cdn),如 cdn.jsdelivr.net 要获取mathjax的副本,或下载mathjax的副本并将其安装到您自己的服务器(用于网络访问)或硬盘(用于无网络连接的本地使用)。下面介绍第一种方法,第二种方法在 托管您自己的mathjax副本 .

此页面提供了在网站上启动和运行mathjax的最快速和最简单的方法,但是您可能希望阅读链接部分中的详细信息,以便自定义页面的设置。

使用内容交付网络(cdn)中的mathjax

使用mathjax的最简单方法是直接链接到通过内容分发网络(cdn)提供的公共安装。当您使用cdn时,不需要自己安装mathjax,您可以立即开始使用mathjax。cdn将自动安排读者从附近的快速服务器下载mathjax文件。

要使用cdn中的mathjax,需要做三件事:

  1. 在页面中包含mathjax配置(在某些情况下这可能是可选的)。

  2. 在包含数学的网页中链接到mathjax。

  3. 把数学放到你的网页上,这样mathjax就可以显示它。

有许多免费的cdn服务提供mathjax的副本。其中大多数要求您指定要加载的mathjax的特定版本,但有些提供“滚动发布”,即在发布时更新到最新可用版本的链接(注意,我们还提供了自动获取最新版本的方法,如下所述)。

使用 jsdelivr ,通过将

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

进入 <head> 阻止您的文档。(它也可以进入 <body> 如有必要,但应首选头部。)这将从分布式服务器加载最新的3.x.x版本的mathjax,将其配置为同时识别tex和mathml表示法中的数学,并要求它使用带有css的html(commonhtml输出格式)生成其输出,以显示数学。

警告

这个 tex-mml-chtml.js 文件包含mathjax处理这两种输入格式并生成此输出格式所需的所有部分。还有其他几个具有不同输入/输出组合的选项,您甚至可以将mathjax配置为单独加载组件。

我们在这里列出这个文件是因为它可以让您快速地开始使用mathjax,而不必太担心配置;但是由于它是组合组件文件中最通用的一个,所以它也是最大的一个,所以您可能需要考虑一个更小的,更复杂的根据你的需要。请参阅 配置和加载mathjax 有关如何完成此操作的详细信息,以及 mathjax组件 有关组件本身的信息。

如果您使用上面给出的代码片段,那么只要mathjax更新并且版本发生更改,就不需要更改url,因为 jsdelivr 提供 mathjax@3 获取 tex-mml-chtml.js CDN上提供的最新版本(3.x.x)的文件。

获取最新版本

虽然 jsdelivr 提供了一种自动获取最新版本的方法,如上所述,并不是所有的cdn都有这样的机制。对于这样的cdn,MathJax提供了一个 latest.js 可用于获取mathjax最新(3.x.x)版本的文件。例如, cdnjs 没有自动获取最新3.x.x版本的机制,因此您可以使用

<script type="text/javascript" id="MathJax-script" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.0.0/es5/latest?tex-mml-chtml.js">
</script>

获取最新(3.x.x)版本的 tex-mml-chtml 组件来自 cdnjs ;尽管您已经开始要求3.0.0版,但是 latest.js 脚本将自动切换到最新的3.x.x版本。

获取特定版本

无论mathjax的当前版本如何,也可以始终使用特定的版本。为此,只需在url中给出完整的版本号;例如:

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

将始终加载 tex-mml-chtml.js 组合组件文件。

对于如何指定版本号,其他CDN的格式略有不同。例如, cdnjs 使用以下内容:

<script type="text/javascript" id="MathJax-script" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.0.0/es5/tex-mml-chtml.js">
</script>

得到相同的文件。

浏览器兼容性

mathjax支持所有现代浏览器(chrome、safari、firefox、edge)和大多数移动浏览器。包括 polyfill 库以支持早期的浏览器版本(请参见 browser support 页了解详细信息)。特别是,要允许mathjax版本3与ie11一起工作,请包括

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>

在加载mathjax的脚本之前。


配置mathjax

组合的组件文件,如 tex-mml-chtml.js ,包括mathjax中可用的各种选项的默认设置。你可能需要调整这些以适应你的需要。例如,tex输入组件不启用单美元符号作为行内数学的分隔符,因为单美元符号经常出现在普通文本中,例如,“第一个符号的价格是50美元,每增加一个符号的价格是40美元”,这会使have“50 for the fir”混淆。第一,和“被排版为数学”。

如果希望启用单美元符号作为行内数学分隔符,则需要通过提供显式的mathjax配置来告诉mathjax。通过使用 <script> 标记以设置 MathJax 全局变量,用于保存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>

将mathjax的tex输入组件配置为使用 $...$\(...\) 作为内联数学的分隔符(这将启用单个美元符号作为数学分隔符),然后加载 tex-chtml.js 用于tex输入和commonhtml输出的组件。

可以用这种方式设置许多选项。请参阅 配置和加载mathjax 更多细节,等等 配置mathjax 有关各种组件的可用选项的信息。


把数学放在网页上

一旦配置并加载了mathjax,它将在您的web页面中查找要处理的数学。有三种可用的数学格式:tex/latex、mathml和ascimath。tex/latex和ascimath格式是纯文本格式,使用特殊分隔符将数学与文档的其余文本分隔开,而mathml格式是一种xml格式,使用“标记”(类似于html标记)来表示数学。tex和ascimath通常是手工编写的,而mathml通常是由数学软件或专门的编辑器生成的。

请参见 为mathjax编写数学 有关如何以这三种格式输入数学的详细信息。

请注意,一旦MathJax处理完页面,除非您显式告诉它,否则它将不会再次运行。例如,如果在MathJax已经运行之后向页面添加新的数学运算,则在您请求之前,MathJax不会处理该数学运算。请参阅上的一节 动态内容中的mathjax 了解如何做到这一点的详细信息。


从这里去哪里?

如果您已经按照上面的说明进行了操作,那么现在应该在您的web服务器上安装并配置了mathjax,并且您应该能够使用它来编写包含数学的web页面。此时,您可以开始制作包含数学内容的页面!

你还可以阅读更多关于如何 customize MathJax .

您还可以查看 MathJax examples 有关使用mathjax的说明。

如果您正在处理包含数学的动态页面,则可能需要阅读 MathJax Application Programming Interface (它的api),所以您知道如何在交互式页面中包含数学。

最后,如果您有问题或意见,或者希望帮助支持mathjax,可以访问 MathJax community forumsMathJax bug tracker .