jquery - 让 PageDown 和 MathJax 一起工作

标签 jquery mathjax pagedown

我正在实现一个 UI,它看起来应该与 math.stackexchange.com 上的 UI 非常相似。 :

  1. 像您习惯的那样使用花哨的 Markdown stackoverflow
  2. 使用 MathJax 解析 $ 之间的公式... $ -迹象。

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

MathJax 得到了 example对于这种方法,但我无法让它运行。这就是“我的”代码的样子:

     <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 渲染得很好,但一旦我开始输入 $ ... $代码打印在预览框中。

最佳答案

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

但是还有第二个问题,就是wmd编辑器会更新wmd预览区域,你应该配合它来更新MathJax,否则可能会在MathJax更新时改变div的内容正在努力。 Wmd 在更新时也比每次按键时更智能(例如,箭头键不会导致更新),因此协调起来也会更有效。 wmd 的 SE 版本具有允许您执行此操作的钩子(Hook),我怀疑您正在使用的版本也可以这样做。

最后,您必须做更多的工作来保护数学免受 Markdown 引擎的影响,以便下划线和反斜杠等内容出现在数学中时不会被 Markdown 处理。这有点棘手,但如果不这样做,您将遇到许多 TeX 代码无法正确处理的问题。

要解决最后两个问题,您可以考虑查看 code used by MSE用于将 MathJax 挂接到 wmd 中。也许这会给您一些关于如何做到这一点的线索。

关于jquery - 让 PageDown 和 MathJax 一起工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11228558/

相关文章:

javascript - MathML 未呈现并显示在文本区域下方

r - 在 R 中使用 pagedown 将 HTML 转换为 pdf

python - 如何将代码片段保存到数据库?

javascript - jQuery 替换鼠标光标

javascript - 通过从字段中删除引号、支持标题和允许其他分隔符来改进 csv 文件阅读器

latex - 在 github 页面上使用 Jekyll 在 MathJax 中呈现一些 latex 语法时遇到问题

asp.net - MathJax - 文件加载失败 :/extensions/MathZoom. js

javascript - 如何在小部件中使用 jquery-ui 复选框?

javascript - 将 ajax 调用返回的数据添加到 UL,然后更新 jQuery 流沙

http - 与此站点的连接不完全安全