前端接收的数据中会出现数学公式,而公式是以latex的形式传递,需要前端解析成正常的公式再展示出来,下面就介绍使用mathJax的解决方案。

一、使用MathJax渲染latex数学公式

首先在index.html中导入MathJax库,同时配置需要解析的公式选择符:

<script type="text/javascript" async 
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">
 MathJax.Hub.Config({
       tex2jax: {
            inlineMath: [['$', '$'], ["\\(", "\\)"]], //行内公式选择符
            displayMath: [["$$", "$$"], ["\\[", "\\]"]], //段内公式选择符
            skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签
      });
</script>

2.在组件内使用

在组件内使用时需要使用window.MathJax.Hub.Queue这个回调函数来执行渲染。
使用方法:

window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById('app')]);

如果省略第三个参数,会渲染整个document,适用于公式很多并且在网页中涉及范围广的情况下,否则建议指明位置,提高速度。

使用MathJax不仅可以渲染纯latex数据,即使latex公式包含在富文本中也可以被渲染出来。但是某些公式或者符号渲染出来后样式可能会出现问题,可以通过选择元素的方式来修改样式。

使用MathJax在vue中渲染latex数学公式前言一、使用MathJax渲染latex数学公式1.配置2.在组件内使用总结前言前端接收的数据中会出现数学公式,而公式是以latex的形式传递,需要前端解析成正常的公式再展示出来,下面就介绍使用mathJax的解决方案。一、使用MathJax渲染latex数学公式1.配置首先在index.html中导入MathJax库,同时配置需要解析的公式选择符:&lt;script type="text/javascript" async src="htt 官方网址:MathJax使用文档 简介:MathJax支持使用LaTeX,MathML或AsciiMath语法在网页渲染数学公式。我们常用的语法为LaTex,比如该论坛支持的也是LaTex 。 二、应用场景     想实现在用户选择文件后能够直接在前... 一.引入MathJax 在index.html加入下面语句即可引入MathJax,该语句导入的是国内的CDN <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script> 二.配置MathJax 在src的compon
2、MathJax介绍   MathJax是一款运行在浏览器的开源的数学符号渲染引擎,使用MathJax可以方便的在浏览器显示数学公式,不需要使用图片。目前,MathJax可以解析Latex、MathML和ASCIIMathML的标记语言。(Wiki)   3.1、引入MathJax     我们通过在index.html加入下面语句即可引入MathJax,该语句导入的是国内的CDN。 <script type="text/javascript" async src="ht
在上一篇文章 (见 http://kms.netease.com/article/14172 ) 讲述了在 Vue 组件如何使用MathJax,却应对不了产品的新需求: 待 MathJax 渲染(Typeset)数学公式后,用户使用浏览器的打印功能打印网页。 在此需求,需要判断所有组件实例的 MathJax Typeset 是否完成。 如何监听所有组件实例MathJax Typeset 是否完成呢? 在上一篇文章 (见 Vue MathJax ..
这个问题自己很早以前便碰到了,用MathJax语法写的一些公式,在本地Markdown编译器上渲染是没问题的,可是部署到hexo博客就出现问题了,之前我是使用图片代替公式应付过去了,今天从网上找了一下资料,发现了其问题所在,同时也解决了这个问题。 hexo默认使用hexo-renderer-marked引擎去渲染网页,它会把利用Markdown语法写的文本去转换为相应的html标...
在 HTML 打出数学公式有几种方法,其一种是使用 MathJax 库。 MathJax 是一个 JavaScript 库,可以在网页上显示数学公式。要在 HTML 页面使用 MathJax,需要在页面的 head 部分引入 MathJax 的脚本: ```html <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> 然后在要插入公式的地方使用 math 标签,将公式LaTeX 格式编写,并在两个 $ 之间包含。如 $\LaTeX$ 公式 $\int_{-\infty}^{\infty}e^{-x^2}dx=\sqrt{\pi}$ 的 HTML 代码为: ```html <p>$\int_{-\infty}^{\infty}e^{-x^2}dx=\sqrt{\pi}$</p> 如果需要单独一行显示可以这样写 ```html <div>$$\int_{-\infty}^{\infty}e^{-x^2}dx=\sqrt{\pi}$$</div> 注意: 如果是在markdown里面添加公式需要在$$之间写公式 公式用到的字符都需要使用LaTex 格式写出。需要使用的字符请参考LaTeX 数学符号表.