Пусть PageDown и MathJax работают вместе

Я реализую пользовательский интерфейс, который должен выглядеть примерно так, как на math.stackexchange.com:

  • Использование причудливого Markdown, как вы привыкли на /qaru.site/...
  • Разбор формулировок с использованием MathJax между $... $ -signs.

Итак, я загрузил демонстрацию PageDown и установил ее, что работает очень хорошо. Теперь я стараюсь, чтобы MathJax динамически загружался каждый раз при изменениях <textarea>.

MathJax получил пример для этого подхода, но я не могу его запустить. Вот как выглядит мой код:

     <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>

Этот фрагмент должен обновлять предварительный просмотр каждый раз при запуске события keypress. Вместо этого на странице onload tex отображается отлично, но как только я начинаю вводить код $... $, печатается в окне предварительного просмотра.

Ответы

Ответ 2

Есть несколько проблем с вашей текущей настройкой. Во-первых, пример, который вы заимствовали, является примером обновления одного уравнения, а не абзацев, который включает в себя несколько уравнений. Для этого вам нужно будет рассмотреть второй динамический пример (на странице примеров MathJax ). Вы должны получить сообщение об ошибке в консоли вашего браузера, которое должно иметь значение null (math будет null, если вы начнете с некоторой математики в редакторе).

Но есть вторая проблема, которая заключается в том, что редактор wmd будет обновлять область предварительного просмотра wmd, и вы должны координировать с ним обновление MathJax, так как в противном случае он может изменить содержимое div, а MathJax - работаю над этим. Wmd также умнее, когда он обновляется, а не только на каждом нажатии клавиши (например, клавиши со стрелками не вызывают обновлений), поэтому будет также более эффективно координировать работу. SE версия wmd имеет крючки, чтобы вы могли это сделать, и я подозреваю, что тот, который вы используете, также делает.

Наконец, вам нужно будет сделать больше работы, чтобы защитить математику от механизма Markdown, чтобы такие вещи, как подчеркивания и обратные косые черты, не обрабатывались Markdown, когда они появляются в математике. Это немного сложно, но без этого вы столкнетесь с множеством проблем с тем, что ваш код TeX не обрабатывается должным образом.

Для решения двух последних проблем вы можете рассмотреть код используемый MSE для подключения MathJax в wmd. Возможно, это даст вам некоторые подсказки о том, как это сделать.

Ответ 4

Geoff Dalgas в Qaru только что выпустил свой код интеграции MathJax + PageDown как инструмент. Подробнее см. Meta post.