使用MathJax和JQuery插入MathML

我最近開始在我的應用程序中使用MathJax，並使用JQuery嘗試編寫直觀/構造邏輯的編輯器。我面臨的問題是無論何時加載頁面，我使用JQuery注入MathML，它不能正確呈現。下面的代碼使用MathJax和JQuery插入MathML

<math display="block" id="mathml-derivation"> 
    <mrow class="beginning"> 
    </mrow> 
</math>

這是JavaScript

setTimeout(function() { 
      console.log("Started"); 
      var $frac = document.createElement('mfrac'); 
      $frac.innerHTML = '<mrow id="children' + parseInt(1) + '" class="conclusion">\ 
          <mrow>\ 
           <mi>b</mi>\ 
          </mrow>\ 
         </mrow>\ 
         <mrow class="assumption">\ 
          <mo>' + "\u22A2" + '</mo>\ 
          <mrow class="goal clickable">\ 
           <mi>a</mi>\ 
          </mrow>\ 
         </mrow>'; 
      $("#mathml-derivation").append($frac); 
      console.log($frac); 
      MathJax.Hub.Typeset("mathml-derivation"); 
     }, 1000);

我不能確定是什麼問題。我有一個setTimeout函數的原因是爲了確保它在頁面加載後至少執行一秒。當我立即加載或通過事件加載時，MathML無法正確渲染。我跟在StackOverflow上的一些其他帖子，它說使用'.Typeset'函數，但它不能正常工作。

作爲最後一點，我使用Chrome開發，並且我正在使用MathJax來兼容。

來源

2016-06-12 Ysrninja

你能分享一個完整的，獨立的例子作爲嵌入式片段嗎？ –

@PeterKrautzberger感謝您的回覆，這裏是一個jsfiddle https://jsfiddle.net/rmqj0pwv/ ...注意，如果您將setTimeout從1000更改爲0，那麼它的工作原理，否則它不會 – Ysrninja

你的jsfiddle例子有幾個問題。

您看到使用超時的不穩定行爲是由於您的MathJax和jQuery代碼之間缺乏同步。在運行jQuery代碼之前，MathJax可能已經完全加載，也可能沒有完全加載。所以你最終會遇到一個種族：當你設置一個較低的超時時間時，jQuery部分首先運行並且替換頁面中的MathML（MathJax處理過的）MathML;然後MathJax進入並呈現它在DOM中找到的內容。

如果超時時間更長，您將看到MathJax首先運行時會發生什麼情況 - 並且會遇到第二個問題：MathJax從DOM中刪除源MathML，但在輸出中保留來自源的id。這意味着jQuery部分最終將MathML片段附加到MathJax（HTML或SVG）輸出（從而打破它）。

現在MathJax.Hub.Typeset("mathml-derivation");（這是不理想的，因爲你應該總是使用MathJax的隊列）將只呈現新的數學內容。然而，你的代碼只是在輸出中繞過而不讓MathJax知道某些變化。所以排隊一個簡單的排版不會對該特定的節點做任何事情。如果您要求MathJAx使用MathJax.Hub.Queue(["Rerender", MathJax.Hub]);重新渲染，您仍然不會看到任何效果，因爲將MathML添加到輸出而不是MathJax內部使用的源的第二個問題。長期以來，您需要重新設計MathJax和jQuery之間的交互。你可能想要使用MathJax的排隊機制，因爲它是高度異步的。 MathJax documentation也描述了更新頁面數學問題的幾種方法; 「MathJax方法」將通過text方法更新源代碼，儘管大多數開發人員會懶惰地刪除整個輸出節點並插入更改後的MathML，並僅排隊typeset（因爲DOM中現在有新的數學運算）。

請注意，MathJax不提供用於修改子表達式的API，因此您必須自己跟蹤它，例如，保留代表MathML表達狀態的內部DOM節點，修改它，然後將其複製到DOM以更新視覺輸出。

來源

2016-06-13 11:12:55

感謝您的回覆@PeterKrautzberger ，我很困難，需要一些幫助。我使用超時的原因是出於測試原因。我刪除它，並添加一個按鈕，而不是注入數學。現在我遵循了文檔，而是使用了函數文本，並用於MathJax所具有的.Queue模塊。我認爲問題是我正在注入MathML並使用不正確的文本函數。話雖如此，我也嘗試過像文檔中的例子一樣的'x + 1'，但它沒有奏效。檢出更新的小提琴https://jsfiddle.net/rmqj0pwv/2/。 – Ysrninja

沒問題。還有兩個問題：a）您將MathJax的ID傳遞給MathML中的一個元素，從而在MathJax輸出中 - 但MathJax無法在該節點內找到任何數學運算（它正在尋找自定義類型的腳本標記順便一提）。一種解決方案是使用mathML的包裝元素。 b）您正在推送部分MathML片段，並應使其自成一體，即' $...$ '。在https://jsfiddle.net/u8jvnatt/查看我的分支。 –

謝謝你，這真的很有幫助！我沒有15的聲望:(我不能讓你高興，但我已經接受你的答案！ – Ysrninja

使用MathJax和JQuery插入MathML

回答

相關問題