examples jquery mathjax pagedown

jquery - mathjax examples



Deje que PageDown y MathJax trabajen juntos. (4)

Estoy implementando una interfaz de usuario que se parece mucho a la de math.stackexchange.com :

  1. Usando el Markdown de lujo como estás acostumbrado en stackoverflow
  2. Analizando formularios usando MathJax entre $ ... $ -signos.

Así que descargué la demo de PageDown y la configuré, que funciona bastante bien. Ahora trato de dejar que MathJax se cargue dinámicamente cada vez que cambia <textarea> .

MathJax recibió un example para este enfoque, pero no puedo hacerlo funcionar. Así es como se ve el código ''my'':

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

Este fragmento debería actualizar la vista previa cada vez que se dispara el evento de keypress . En cambio, en la página de carga, el texto se procesa bien, pero tan pronto como empiezo a escribir, el código $ ... $ se imprime en el cuadro de vista previa.

Hay varios problemas con su configuración actual. Primero, el ejemplo del que ha tomado prestado es un ejemplo de actualización de una sola ecuación, no párrafos que incluyen varias ecuaciones. Para eso, deberías considerar el segundo ejemplo dinámico (de la página de ejemplos de MathJax). Debería estar recibiendo un mensaje de error en la consola de su navegador que tendrá que ver con un valor null (las math serán null menos que empiece con algunas matemáticas en el editor para empezar).

Pero hay un segundo problema, que es que el editor de wmd actualizará el área de vista previa de wmd, y debe coordinar con él para realizar la actualización de MathJax, ya que de lo contrario podría cambiar el contenido del div mientras MathJax está trabajando en ello . Wmd también es más inteligente cuando hace actualizaciones que solo con cada pulsación de tecla (por ejemplo, las teclas de flecha no causan actualizaciones), por lo que también será más eficiente coordinar. La versión SE de wmd tiene ganchos para permitirte hacer eso, y sospecho que la que estás usando también lo hace.

Finalmente, tendrá que trabajar más para proteger las matemáticas del motor Markdown, de modo que Markdown no procese las cosas como guiones bajos y barras invertidas cuando aparezcan en las matemáticas. Eso es un poco complicado, pero sin eso, tendrá muchos problemas con el código TeX que no se procesa correctamente.

Para lidiar con los dos últimos problemas, podría considerar mirar el código utilizado por MSE para conectar MathJax a wmd. Tal vez eso te dará algunas pistas sobre cómo hacerlo.