Lassen Sie PageDown und MathJax zusammenarbeiten

Question

Jun 27, 2012, 04:30 PM

Lassen Sie PageDown und MathJax zusammenarbeiten

Ich implementiere eine Benutzeroberfläche, die der auf ziemlich ähneln sollmath.stackexchange.com:

Verwenden Sie ausgefallene Markdown wie gewohntPaketüberflussParsing Formeln mit MathJax zwischen$...$-Schilder.

Also habe ich die PageDown-Demo heruntergeladen und eingerichtet, was ziemlich gut funktioniert. Jetzt versuche ich, MathJax jedes Mal dynamisch laden zu lassen<textarea>Änderungen.

MathJax hat eineBeispiel für diesen Ansatz bin ich aber nicht in der Lage, es zum Laufen zu bringen. So sieht mein Code aus:

     <link rel="stylesheet" type="text/css" href="demo.css" />

    <script type="text/javascript" src="../../Markdown.Converter.js"></script>
    <script type="text/javascript" src="../../Markdown.Sanitizer.js"></script>
    <script type="text/javascript" src="../../Markdown.Editor.js"></script>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [["$","$"],["\\(","\\)"]]
        }
      });
    $("#wmd-input").keypress(function(event){
        UpdateMath($(this).val());
    });
    </script>
    <script type="text/javascript" src="../../../mathjax-MathJax-07669ac/MathJax.js?config=TeX-AMS_HTML-full">
    </script>
</head>
<body>
    <script>
      (function () {
        var QUEUE = MathJax.Hub.queue;  // shorthand for the queue
        var math = null;                // the element jax for the math output.

        QUEUE.Push(function () {
          math = MathJax.Hub.getAllJax("#wmd-preview")[0];
        });

        window.UpdateMath = function (TeX) {
          QUEUE.Push(["Text",math,"\\displaystyle{"+TeX+"}"]);
        }
      })();
    </script>

    <div class="wmd-panel">
        <div id="wmd-button-bar"></div>
        <textarea class="wmd-input" id="wmd-input" value=""/>

    </textarea>
    </div>
    <div id="wmd-preview" class="wmd-panel wmd-preview"></div>
    <br /> <br />
    <script type="text/javascript">(function () {
                 var converter1 = Markdown.getSanitizingConverter();
            var editor1 = new Markdown.Editor(converter1);
            editor1.run();
        })();
    </script>
</body>

Dieses Snippet sollte die Vorschau jedes Mal aktualisieren, wenn diekeypress Ereignis wird ausgelöst. Stattdessen wird auf der Seite onload der Text in Ordnung gebracht, aber sobald ich mit der Eingabe beginne$...$Der Code wird im Vorschaufenster ausgedruckt.