2011-10-28 28 views
7

我一直在調整下面的示例代碼。 MathJax的文檔不是很完整。有人能有更多的經驗告訴我應該如何修改下面的代碼,以便Tex只在指定分隔符(如$ \ alpha $)時解析。我想使它像math.stackexchange一樣工作。僅當有分隔符時動態顯示MathJax

<html> 
    <head> 
    <title>MathJax Dynamic Math Test Page</title> 

    <script type="text/x-mathjax-config"> 
     MathJax.Hub.Config({ 
     tex2jax: { 
      inlineMath: [["$","$"],["\\(","\\)"]] 
     } 
     }); 
    </script> 
    <script type="text/javascript" 
     src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full"> 
    </script> 

    </head> 
    <body> 

    <script> 
     // 
     // Use a closure to hide the local variables from the 
     // global namespace 
     // 
     (function() { 
     var QUEUE = MathJax.Hub.queue; // shorthand for the queue 
     var math = null;    // the element jax for the math output. 

     // 
     // Get the element jax when MathJax has produced it. 
     // 
     QUEUE.Push(function() { 
      math = MathJax.Hub.getAllJax("MathOutput")[0]; 
     }); 

     // 
     // The onchange event handler that typesets the 
     // math entered by the user 
     // 
     window.UpdateMath = function (TeX) { 
      QUEUE.Push(["Text",math,"\\displaystyle{"+TeX+"}"]); 
     } 
     })(); 
    </script> 
    <textarea id="MathInput" size="50" onkeyup="UpdateMath(this.value)"></textarea> 

    <div id="MathOutput"> 
    You typed: ${}$ 
    </div> 

    </body> 
    </html> 
+0

注:cdn.mathjax.org接近其結束生命,檢查HTTPS: //www.mathjax.org/cdn-shutting-down/獲取遷移提示。 –

回答

19

您發佈的示例代碼取MathInput的內容,並與來自MathInput新的「數學」取代了第一MathJax元素。你想要的是排版MathInput併爲分隔文本創建新的MathJax元素。我設置一個的jsfiddle例子在這裏: http://jsfiddle.net/Zky72/2/

主要的變化是在UpdateMath功能:從未來

window.UpdateMath = function (TeX) { 
    //set the MathOutput HTML 
    document.getElementById("MathOutput").innerHTML = TeX; 

    //reprocess the MathOutput Element 
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,"MathOutput"]); 

} 
+0

你從哪裏學習如何做到這一點?你知道任何有關JavaScript或mathjax的書嗎?任何參考將不勝感激:) – Mark

+0

在MathJax網站上的文檔實際上有一個關於如何操縱頁面上的數學元素的部分:http://www.mathjax.org/docs/1.1/typeset.html至於如何在這裏學習JavaScript是一個很好的資源的stackoverflow問題:http://stackoverflow.com/questions/11246/best-resources-to-learn-javascript –

+0

我知道這個問題是舊的,但我已經使用過這個(感謝方式),並且存在問題,它會一直跳到頁面的頂部,如果我離開定義括號的位,整個頁面將被格式化,這是否是由設計決定的?我現在必須非常小心括號嗎? –