MathJax的使用

版权声明：我的个人博客：http://www.zjhuiwan.cn。 https://blog.csdn.net/sunon_/article/details/84986907

原文链接：http://www.zjhuiwan.cn/toDetail?articleId=1812131133133410001

今天下了个mathJax用来格式化数学公式，记录一下大概用法，方便以后使用。我也是直接用的官方的demo改的。。

首先官网下mathJax的源码包，放到项目中

直接上代码：

 <script type="text/x-mathjax-config">
            MathJax.Hub.Config({
              showProcessingMessages: false,
              tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }
            });
  $(function() {
   var content = "";
      var Preview = {
              delay: 150,
              preview: null,
              buffer: null,
              timeout: null,
              mjRunning: false,
              mjPending: false,
              oldText: null,
              Init: function () {
                this.preview = document.getElementById("MathPreview");
                this.buffer = document.getElementById("MathBuffer");
              },
              SwapBuffers: function () {
                var buffer = this.preview, preview = this.buffer;
                this.buffer = buffer; this.preview = preview;
                buffer.style.visibility = "hidden"; buffer.style.position = "absolute";
                preview.style.position = ""; preview.style.visibility = "";
              },
              Update: function () {
                if (this.timeout) {clearTimeout(this.timeout)}
                this.timeout = setTimeout(this.callback,this.delay);
              },

              CreatePreview: function () {
                Preview.timeout = null;
                if (this.mjPending) return;
                var text = content;
                if (text === this.oldtext) return;
                if (this.mjRunning) {
                  this.mjPending = true;
                  MathJax.Hub.Queue(["CreatePreview",this]);
                } else {
                  this.buffer.innerHTML = this.oldtext = text;
                  this.mjRunning = true;
                  MathJax.Hub.Queue(
                ["Typeset",MathJax.Hub,this.buffer],
                ["PreviewDone",this]
                  );
                }
              },
              PreviewDone: function () {
                this.mjRunning = this.mjPending = false;
                this.SwapBuffers();
              }
            };
            Preview.callback = MathJax.Callback(["CreatePreview",Preview]);
            Preview.callback.autoReset = true;

      Preview.Init();

      $("#uptitle,#upcontent,#upanswerTitle,#upanswerContent").on("input", function() {
          content = $(this).val();
          Preview.Update();
      });
  });
 </script>
 <script type="text/javascript" src="${pageContext.request.contextPath}/js/mathjax/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script>

 <div class="form-group">
     <label for="upanswerTitle"  class="control-label" style="text-align: center;width:20%">答案<span style="color:red;"> *</span></label>
     <textarea id="upanswerTitle" class="form-control"
        style="width: 70%; display: inline-block; margin-right: 15px; padding-left:0px; padding-right:0px;" rows="5" cols=""></textarea>

 </div>
 <div class="form-group">
     <label for="upanswerContent" class="control-label" style="text-align: center;width:20%">解析</label>
     <textarea id="upanswerContent" class="form-control"
        style="width: 70%; display: inline-block; margin-right: 15px; padding-left:0px; padding-right:0px;"
         rows="5" cols=""></textarea>
 </div>

  <div class="form-group">
    <div id="MathPreview" style="padding: 3px; width:100%; margin-top:5px"></div>
    <div id="MathBuffer" style="border:1px solid; padding: 3px; width:100%; margin-top:5px;
          visibility:hidden; position:absolute; top:0; left: 0"></div>
   </div>

效果：