2011-10-28 29 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

我知道这个问题是旧的,但我已经使用过这个(感谢方式),并且存在问题,它会一直跳到页面的顶部,如果我离开定义括号的位,整个页面将被格式化,这是否是由设计决定的?我现在必须非常小心括号吗? –