美文网首页工作生活
angular5 使用 npm 集成 MathJax

angular5 使用 npm 集成 MathJax

作者: 马克_唐卡 | 来源:发表于2019-07-01 19:09 被阅读0次
    1. 安装 mathjax (建议指定版本,避免升级带来的问题):
    npm install mathjax
    
    1. 安装顺序导入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';
    
    1. 在 ts 文件生命 MathJax:
    declare var MathJax: any;
    
    1. 在初始化方法中初始化 MathJax:
    MathJax.Hub.Config({
         tex2jax: {
           inlineMath: [ ['$','$'], ["\\(","\\)"] ],
           displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
         }});
    
    1. 在页面需要渲染公式的地方调用渲染方法:
    MathJax.Hub.Queue(['Typeset', MathJax.Hub]);
    

    注意:第5步中的方法如果调用地方不对,将会没有效果,我的需求是在服务器拿回全部数据后,用户会选择性的显示指定内容,这时候需要在用户更新内容前后都调用。想用的同学,可以自行尝试。

    相关文章

      网友评论

        本文标题:angular5 使用 npm 集成 MathJax

        本文链接:https://www.haomeiwen.com/subject/nxvncctx.html