让PageDown和MathJax一起工作 [英] let PageDown and MathJax work together

查看:100
本文介绍了让PageDown和MathJax一起工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在实现一个UI,该UI看起来很像 math.stackexchange.com 上的UI:

I am implementing a UI which is supposed to look pretty much like the one on math.stackexchange.com:

  1. 像以前一样使用花式Markdown来进行 stackoverflow
  2. $ ... $-符号之间使用MathJax解析公式.
  1. Using fancy Markdown like you are used to on stackoverflow
  2. Parsing formulars using MathJax between $...$-signs.

因此,我下载了PageDown演示并进行了设置,效果很好.现在,我尝试让每次<textarea>更改时都动态加载MathJax.

So I downloaded the PageDown demo and set it up, which works pretty well. Now I try to let MathJax being loaded dynamically everytime the <textarea>changes.

MathJax为此方法提供了示例,但我不是能够使其运行.这是我的"代码的样子:

MathJax got an example for this approach but I'm not able to get it running. This is what 'my' code looks like:

     <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可以很好地呈现,但是一旦我开始输入$ ... $代码,就会在预览框中打印出

This snippet should update the preview everytime the keypress event is fired. Instead on page onload the tex is rendered fine but as soon as I start typing the $...$code is printed in the preview box.

推荐答案

我创建了

I've created a basic example for how to get Pagedown and MathJax working together using a slight modification of Stack Exchange's mathjax-editing.js.

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

Stack Exchange's code is based on Davide Cervone's, see his comment on another answer.

可以在 github 上查看示例代码.

The code for the example can be viewed on github.

这篇关于让PageDown和MathJax一起工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆