HTML中显示数学公式

需求：

在网页中显示这样一个数学公式

用到的插件：https://www.mathjax.org/

<!DOCTYPE html><html><head><title>MathJax TeX Test Page</title><script type="text/x-mathjax-config">  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});</script><script type="text/javascript"  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script></head><body>$$ TPM_{i} = \frac{ \frac{ N_{i} }{ L_{i} } * 1000000}{\sum_{i=1}^{n} \frac{N_{i}}{L_{i}}}$$</body></html>复制代码

这里需要注意的是：

当前项目用的是vue.js，要在页面dom元素都加载完成后再执行这句话，否则一打开页面数学公式并没有解析成公式而是p标签内的普通文字，页面刷新后才能显示

mounted () {this.$nextTick(function() {MathJax.Hub.Queue(["Typeset", MathJax.Hub]);});},复制代码

ok～大功告成！页面上完美显示公式！

HTML中显示数学公式相关推荐

在网页中显示数学公式
网上在网页中显示数学公式的办法有很多,在实验了很多方法后我还是选择两种最简单粗暴的方法. 1.截图 2.ASCIIMathML 比起MathML,ASCIIMathML简单了很多,不需要再 ...
html页中加入数学公式,Html+Css+JavaScript实现网页公式编辑器(一)
最近一直在做网页版的公式编辑器,现在进度过半,我来总结一下这段时间开发网页公式编辑器的经验. 开始开发之前,我在网上搜集了大量网页公式方面的资料,现在比较流行的网页公式都是用MathML:数学置标语言 ...
wps linux乱码,在Deepin系统中解决wps在显示数学公式时出现乱码的问题
本文所解决的问题是wps在显示数学公式时出现乱码,使其正常显示,在Deepin系统中应用下面解决方法成功.同时在解决wps数学公式显示时,如果把windows的字体全部复制到系统里,QQ字体会变模糊, ...
android 显示数学函数,MathView,在Android应用中，显示数学公式的库,下载MathView的源码_GitHub_开发99...
MathView MathView 是第三方视图库,它可以帮助你更轻松地在Android应用程序上显示数学公式. 两个渲染引擎可用:MathJax 和 KaTeX. 支持Android版本 4.1 ( ...
typora插入代码设置_一篇文章教会你如何在Markdown文档中插入数学公式
我平时用的比较多的是Typora这个markdown编辑器.所以在这里就以Typora为例,介绍如何在Markdown文档中插入数学公式的方法. 如果你学会了这个方法,那么你无论使用哪一个markdo ...
Markdown 中 LaTex 数学公式命令
转自:https://www.jianshu.com/p/0ea47ae02262 引言在学习理工科知识或者是目前火热的深度学习等过程中,会涉及到大量的数学公式,并且考虑到准备以 Markdown ...
在vue中渲染数学公式 - MathJax
在vue中渲染数学公式 - MathJax 1.开发背景目前在使用vue+elementui做一个考试管理系统,在做学生考试页面时需要用到数学公式,但是后台解析出来后不是图片,而且如果是图片的话放在 ...
markdown中编辑数学公式用到的技巧
markdown中编辑数学公式用到的技巧 markdown中编辑数学公式用到的技巧希腊字母需要转义的字符公式运算符基本运算符比较运算符集合运算符求导上下标 y帽分段函数三角函数 ...
使用Mathtype公式编辑器生成CSDN中的数学公式
使用Mathtype公式编辑器生成CSDN中的数学公式在CSDN中输入数学公式,直接使用LaTeX编辑输入公式有一些难度,如果你熟悉Mathtype公式编辑器,那么在CSDN文档中输入数学公式也变的 ...

HTML中显示数学公式

HTML中显示数学公式相关推荐

最新文章

热门文章