21

我正在实现一个用户界面，它应该看起来很像math.stackexchange.com上的用户界面：

  1. 像你在stackoverflow上习惯的那样使用花哨的 Markdown
  2. $使用... -符号之间的 MathJax 解析公式$。

所以我下载了 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每次触发事件时，此代码段都应更新预览。相反，在页面加载时，tex 渲染得很好，但只要我开始输入$...$代码就会打印在预览框中。

4

4 回答 4

24

您当前的设置存在几个问题。首先，您借用的示例是更新单个方程式的示例，而不是包含多个方程式的段落。为此，您需要考虑第二个动态示例（来自 MathJax示例页面）。您应该在浏览器控制台中收到与null值有关的错误消息（除非math您null从编辑器中的一些数学开始）。

但是还有第二个问题，那就是 wmd 编辑器会更新 wmd-preview 区域，你应该配合它进行 MathJax 更新，否则它可能会在 MathJax 工作时改变 div 的内容. Wmd 在更新时也比每次按键都更智能（例如，箭头键不会导致更新），因此协调起来也会更有效。wmd 的 SE 版本具有允许您执行此操作的挂钩，我怀疑您正在使用的那个也可以。

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

要处理最后两个问题，您可以考虑查看MSE用于将 MathJax 连接到 wmd 的代码。也许这会给你一些关于如何做的线索。

于 2012-06-27T16:35:07.030 回答
15

我只是将标记（Pagedown 之外的另一个 Markdown 库）和“MathJax”组合成“markdown+mathjax 实时编辑器”。

查看演示： http: //kerzol.github.io/markdown-mathjax/editor.html

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

于 2014-02-04T20:53:59.540 回答
13

我创建了一个基本示例，说明如何使用对 Stack Exchange 的mathjax-editing.js的轻微修改使 Pagedown 和 MathJax 协同工作。

Stack Exchange 的代码基于 Davide Cervone 的代码，请参阅他对另一个答案的评论。

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

于 2015-10-16T23:51:38.770 回答
7

Stack Overflow 上的 Geoff Dalgas 刚刚发布了他们的 MathJax + PageDown 集成代码作为要点。有关更多详细信息，请参阅Meta 帖子。

于 2016-02-12T16:55:38.720 回答