html数学公式显示库MathJax的使用
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>
显示效果
文章由官网发布，如若转载，请注明出处：https://www.veimoz.com/384
0 评论
5.2k
发表评论
热门文章
自媒体博客Spimes主题45w 阅读
Spimes主题专为博客、自媒体、资讯类的网站设计....
Splity博客双栏主题15w 阅读
仿制主题，Typecho博客主题，昼夜双版设计，可....
vCard主题个人简历主题13w 阅读
一款个人简历主题，可以简单搭建一下，具体也比较简单....
Spzac个人资讯下载类主题12w 阅读
用于作品展示、资源下载，行业垂直性网站、个人博客，....
热评文章
自媒体博客Spimes主题424 评论
Splity博客双栏主题191 评论
Spzac个人资讯下载类主题89 评论
Splinx博客图片主题35 评论
Spzhi知识付费社区主题34 评论
三栏清新博客S_blog主题31 评论
vCard主题个人简历主题29 评论
Pure轻简主题29 评论
chenyu
4月7日
能不能支持deepseek