2011-10-28 5 views
7

Tôi đã được tinh chỉnh với mã mẫu bên dưới. Tài liệu cho MathJax không hoàn chỉnh lắm. Có thể một người nào đó nhiều kinh nghiệm cho biết làm thế nào tôi nên sửa đổi các mã dưới đây để Tex chỉ phân tích cú pháp khi tôi đã xác định delimiters như $ \ alpha $. Tôi muốn làm cho nó hoạt động như trên math.stackexchange.Hiển thị MathJax động chỉ khi có dấu phân tách

<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

Lưu ý từ tương lai: cdn.mathjax.org sắp end-of-cuộc sống của mình, kiểm tra https: //www.mathjax.org/cdn-shutting-down/ cho các mẹo di chuyển. –

Trả lời

19

Mã mẫu bạn đã đăng sẽ lấy nội dung của MathInput và thay thế phần tử MathJax đầu tiên bằng "toán học" mới từ MathInput. Những gì bạn muốn là để sắp xếp MathInput và tạo các phần tử MathJax mới cho văn bản được phân tách. Tôi thiết lập một ví dụ jsFiddle đây: http://jsfiddle.net/Zky72/2/

Thay đổi chính là trong hàm 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

Bạn đã học cách làm điều này ở đâu? Bạn có biết bất kỳ cuốn sách nào về javascript hoặc mathjax không? Mọi tài liệu tham khảo sẽ được đánh giá cao :) – Mark

+0

Tài liệu trên trang MathJax thực sự có một phần về cách thao tác một phần tử toán học trên trang: http://www.mathjax.org/docs/1.1/typeset.html Theo như cách để tìm hiểu JavaScript ở đây là một câu hỏi stackoverflow với một số tài nguyên tốt: http://stackoverflow.com/questions/11246/best-resources-to-learn-javascript –

+0

Tôi biết câu hỏi này là cũ, nhưng tôi đã sử dụng điều này (cảm ơn cách) và có một vấn đề, nó tiếp tục nhảy lên đầu trang trên key up, cũng nếu tôi để lại trong bit định nghĩa các dấu ngoặc, trang ENTIRE được định dạng, có phải là do thiết kế không? Tôi có phải rất cẩn thận với các dấu ngoặc bây giờ không? –