mathjax数学公式latex解析

最新推荐文章于 2025-01-09 10:52:33 发布

weixin_34326429

最新推荐文章于 2025-01-09 10:52:33 发布

阅读量1.5k

点赞数 1

文章标签： java

原文链接：https://juejin.im/post/5c19b0546fb9a04a102f39e0

版权

官方文档

mathjax 文件引入

<script src="https://cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML"></script>
复制代码

初始化参数配置

<script type="text/x-mathjax-config">
  if(MathJax){
    MathJax.Hub.Config({
      jax: ["input/TeX","output/HTML-CSS", "output/PreviewHTML"],  //输出格式配置：latex 解析为 DOM结构
      tex2jax: {
        inlineMath: [ ['$','$'], ['\\(','\\)'] ],
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
      },
      "HTML-CSS": {
        showMathMenu: false,            // 隐藏右键菜单展示
        linebreaks: {
          automatic: true,  //超长公式换行处理（默认是false不换行）
          width: "80%"      //设置换行的点，默认是遇到等号=换行
        } 
      },
      showProcessingMessages: false,    //隐藏加载时候左下角加载情况的展示
      messageStyle: "none"              //隐藏加载时候左下角加载情况的展示
    });
  }
  </script>
复制代码

样式调整（公式默认会独占一行）

<style type="text/css">
  .MathJax_Display {
    display: inline !important;
    margin: 1em 0;
    max-height: none;
    max-width: none;
    min-height: 0;
    min-width: 0;
    position: relative;
    text-align: left;
    text-indent: 0;
    width: 100%;
    overflow-x:auto;    /*公式太长会溢出*/
    overflow-y:hidden;
  }
  .MathJax{ outline:0;  }
  </style>
复制代码

动态加载DOM结束后，重新渲染mathajx

tips: DOM结构的根结点id="main"

setTimeout(() => {
    window.MathJax && window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById('main')],function(){
        //to do something   公式重新渲染完成后执行这个回调函数
    });
},0)
复制代码