Question

我正在实现一个看起来非常像math.stackexchange.com上的用户界面：

使用像您在[{3}}
在$ ... $ - 符号之间使用MathJax解析公式。

所以我下载了PageDown演示并进行了设置，效果非常好。现在我尝试在每次<textarea>更改时动态加载MathJax。

MathJax为此方法获得了stackoverflow，但我无法让它运行。这就是“我的”代码：

     <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事件时，此代码段都应更新预览。相反，在页面上载时，tex被渲染得很好，但是一旦我开始输入$ ... $代码就打印在预览框中。

Answer 1

您当前的设置存在一些问题。首先，您借用的示例是更新单方程的示例，而不是包含多个方程的段落。为此，您需要考虑second dynamic example（来自MathJax examples page）。您应该在浏览器控制台中收到一条与null值有关的错误消息（math将为null，除非您在编辑器中开始使用某些数学作为开头）。

但还有第二个问题，即wmd编辑器将更新wmd-preview区域，你应该与它协调以进行MathJax更新，否则它可能会改变div的内容而MathJax是正在努力。 Wmd在更新时比在每个按键上更聪明（例如，箭头键不会导致更新），因此协调也会更有效。 Wmd的SE版本有钩子允许你这样做，我怀疑你正在使用的那个也是。

最后，你将不得不做更多的工作来保护Markdown引擎中的数学，这样当Markdown出现在数学中时，下划线和反斜杠之类的东西不会被Markdown处理。这有点棘手，但如果没有这个问题，您的TeX代码会遇到很多问题而无法正确处理。

要处理最后两个问题，您可以考虑查看code used by MSE以将MathJax挂钩到wmd。也许这会给你一些关于如何做的线索。

Answer 2

我只是将marked（另一个Markdown库而不是Pagedown）和“MathJax”合并到“markdown + mathjax实时编辑器”中。

请参阅演示：http://kerzol.github.io/markdown-mathjax/editor.html

获取来源：https://github.com/kerzol/markdown-mathjax

Answer 3

我已经创建a basic example，了解如何使用Stack Exchange mathjax-editing.js的轻微修改让Pagedown和MathJax协同工作。

Stack Exchange的代码基于Davide Cervone，see his comment on another answer。

可以在github上查看该示例的代码。

Answer 4

Stack Overflow上的Geoff Dalgas刚刚发布了他们的MathJax + PageDown集成代码this。有关详细信息，请参阅as a gist。

让PageDown和MathJax一起工作

4 个答案: