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,需要做三件事:
在页面中包含mathjax配置(在某些情况下这可能是可选的)。
在包含数学的网页中链接到mathjax。
把数学放到你的网页上,这样mathjax就可以显示它。
有许多免费的cdn服务提供mathjax的副本。其中大多数要求您指定要加载的mathjax的特定版本,但有些提供“滚动发布”,即在发布时更新到最新可用版本的链接(注意,我们还提供了自动获取最新版本的方法,如下所述)。
jsdelivr.com [latest or specific version] (recommended)
unpkg.com [latest or specific version]
使用 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 forums 或 MathJax bug tracker .