MathJax的使用

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

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

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

直接上代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96

<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>

效果：