Einfügen von MathML mit MathJax und JQuery

Question

Ich habe vor kurzem begonnen, MathJax in meiner Anwendung mit der Verwendung von JQuery zu verwenden, um einen Editor für Intuitionistische/Konstruktive Logik zu erstellen. Das Problem, mit dem ich konfrontiert bin, ist jedes Mal, wenn die Seite geladen wird und ich MathML mit JQuery injiziere, wird es nicht richtig gerendert. Hier ist der Code

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

Dies ist 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); 

Ich bin nicht sicher, was das Problem ist. Der Grund, warum ich eine setTimeout-Funktion habe, besteht darin, sicherzustellen, dass diese mindestens eine Sekunde nach dem Laden der Seite ausgeführt wird. Wenn ich es sofort oder über ein Ereignis lade, wird MathML nicht ordnungsgemäß gerendert. Ich habe einige andere Posts in StackOverflow verfolgt und gesagt, dass ich die '.Typeset'-Funktion verwenden soll, aber es funktioniert nicht richtig.

Als letzte Anmerkung verwende ich Chrome zu entwickeln und ich verwende MathJax für die Kompatibilität.

Answer 1

Es gibt einige Probleme mit Ihrem Beispiel-Beispiel.

Das fehlerhafte Verhalten, das bei der Verwendung von Zeitüberschreitungen auftritt, ist auf eine fehlende Synchronisierung zwischen Ihrem MathJax- und jQuery-Code zurückzuführen. MathJax wurde möglicherweise vollständig geladen, bevor Ihr jQuery-Code ausgeführt wird. Sie enden also mit einem Rennen: Wenn Sie ein niedriges Zeitlimit setzen, wird der jQuery-Teil zuerst ausgeführt und ersetzt das (noch nicht MathJax-verarbeitete) MathML auf der Seite. dann kommt MathJax rein und rendert, was es im DOM findet. Wenn Sie mit einem längeren Timeout arbeiten, sehen Sie, was passiert, wenn MathJax zuerst ausgeführt wird - und Sie stoßen auf ein zweites Problem: MathJax entfernt die Quell-MathML aus dem DOM, behält aber die id s aus der Quelle in der Ausgabe bei. Das bedeutet, dass der jQuery-Teil am Ende ein MathML-Fragment an die Ausgabe von MathJax (HTML oder SVG) anfügt (und dadurch bricht).

Jetzt MathJax.Hub.Typeset("mathml-derivation"); (was nicht ideal ist, wie Sie immer MathJax-Warteschlange verwenden sollten) wird nur neuen mathematischen Inhalt rendern. Allerdings hackt Ihr Code lediglich in der Ausgabe herum, ohne dass MathJax weiß, dass sich etwas geändert hat. Wenn also ein einfacher Satz in die Warteschlange eingereiht wird, wird nichts mit diesem bestimmten Knoten gemacht. Wenn Sie MathJAx aufgefordert haben, den Befehl MathJax.Hub.Queue(["Rerender", MathJax.Hub]); erneut zu verwenden, werden Sie aufgrund des zweiten Problems, dass MathML zur Ausgabe hinzugefügt wird, immer noch keinen Effekt sehen, anstatt die Quelle, die intern von MathJax verwendet wird.

Lange Rede, kurzer Sinn: Sie müssen die Interaktion zwischen MathJax und jQuery neu gestalten. Wahrscheinlich möchten Sie den Warteschlangenmechanismus von MathJax verwenden, da er sehr asynchron ist. Die MathJax documentation beschreibt auch einige Ansätze für das Problem der Aktualisierung von Mathe auf einer Seite; der "MathJax-Weg" wäre, die Quelle über die text Methode zu aktualisieren, obwohl die meisten Entwickler den gesamten Ausgabeknoten faul entfernen und die geänderte MathML einfügen und nur eine typeset einreihen (da es jetzt neue Mathematik im DOM gibt).

Beachten Sie, dass MathJax keine APIs für die Modifikation von Unterausdrücken zur Verfügung stellt. Sie müssen dies selbst nachverfolgen, z. B. einen internen DOM-Knoten behalten, der den Zustand Ihres MathML-Ausdrucks darstellt, diesen ändern und dann Kopieren Sie es in das DOM, um die visuelle Ausgabe zu aktualisieren.