angular5 使用 npm 集成 MathJax
2019-07-01 本文已影响0人
马克_唐卡
- 安装 mathjax (建议指定版本,避免升级带来的问题):
npm install mathjax
- 安装顺序导入js(严格按照顺序,否则会报 找不到 错误):
import 'mathjax/MathJax.js?config=TeX-MML-AM_CHTML';
import 'mathjax/config/TeX-MML-AM_CHTML.js'
import 'mathjax/extensions/MathMenu.js';
import 'mathjax/extensions/MathZoom.js';
import 'mathjax/jax/output/CommonHTML/config.js';
import 'mathjax/jax/output/CommonHTML/jax.js?V=2.7.5';
import 'mathjax/jax/output/CommonHTML/fonts/TeX/fontdata?V=2.7.5';
import 'mathjax/jax/output/CommonHTML/autoload/multiline.js?V=2.7.5';
import 'mathjax/jax/output/CommonHTML/fonts/TeX/AMS-Regular.js?V=2.7.5';
- 在 ts 文件生命 MathJax:
declare var MathJax: any;
- 在初始化方法中初始化 MathJax:
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
}});
- 在页面需要渲染公式的地方调用渲染方法:
MathJax.Hub.Queue(['Typeset', MathJax.Hub]);
注意:第5步中的方法如果调用地方不对,将会没有效果,我的需求是在服务器拿回全部数据后,用户会选择性的显示指定内容,这时候需要在用户更新内容前后都调用。想用的同学,可以自行尝试。