js

怎么使用html数学公式显示库MathJax - js笔记

一些专业的网站上,有时需要进行一些专业数字方面的展示,例如各种方程式或是数学表达式,这个时候就可以借助JS来在网页中优雅的展示你的数学公式

在一些专业的网站上,有时需要进行一些专业数字方面的展示,例如各种方程式或是数学表达式,这个时候就可以借助JS来在网页中优雅的展示你的数学公式。

MathJax是一个开源的web数学公式渲染器,由JS编写而成。MathJax允许你在你的网页中包含公式,无论是使用LaTeX、MathML或者AsciiMath符号,这些公式都会被javascript处理为HTML、SVG或者MathML符号。

引入CDN

只需要在头部添加下面这句,就可以成功引入CDN

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async>
</script>

内联config说明

官方提供了一个能让我们内联一个配置选项的功能,要想让这个内联配置生效就得放在

CDN引入之前。如下

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    showProcessingMessages: false, //关闭js加载过程信息
    messageStyle: "none", //不显示信息
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code', 'a', 'annotation', 'annotation-xml'],
      ignoreClass: 'crayon-.*' // 'crayon-' 开头的类,属于Wordpress代码高亮库,这部分不需要处理,否则会导致显示不正确,这部分是正则式,多条之间用'|'分割    
    },
    'HTML-CSS': {
        showMathMenu: false //禁用右键菜单
    }
  });
  MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
</script>

MathJax 2.x 跟 MathJax 3.x 的配置信息是不同的,这部分的配置转换可以通过MathJax-demos-web中的v2 to v3

Configuration Converter。

上面的配置信息,转换后的结果如下:

window.MathJax = {
  tex: {
    inlineMath: [ ['$','$'], ["\\(","\\)"] ],
    displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
  },
  options: {
    skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre','code', 'a', 'annotation', 'annotation-xml'],
    ignoreHtmlClass: 'tex2jax_ignore|crayon-.*', // 'crayon-' 开头的类,属于Wordpress代码高亮库,这部分不需要处理,否则会导致显示不正确,这部分是正则式,多条之间用'|'分割
    processHtmlClass: 'tex2jax_process'
  },
  //禁用右键菜单    
  renderActions: {
    addMenu: [0, '', '']
  }
};

其中MathJax.Hub.Config()里的配置选项是重点,本例表示用来识别行内公式,$来识别行间公式

书写公式,对应的公式在html文件中写法如下

<body>
${x}^{(2)}\text{=}\begin{bmatrix} 1416\\\ 3\\\ 2\\\ 40 \end{bmatrix}$
</body>

显示效果

怎么使用html数学公式显示库MathJax - js笔记-Npcink
js

简单的JS倒计时 - JS笔记

2020-5-25 22:28:47

js

Jquery版JS倒计时 - JS笔记

2020-5-29 0:23:06

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
若您的权利被侵害,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧