How to enable mathjax rendering in live preview ?

Question

I want to to enable  MathJax rendering in live preview of Markdown editor . I found following snippet on stackoverflow :

$(function() {
    var $text       = $("#text"),
        $preview    = $("#preview");

    $text.on("keyup", function() {
        $preview.html( $text.val() );
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, "preview"]);
    });

    MathJax.Hub.Register.MessageHook("End Process", function (message) {
        $preview.html( q2a-markdown-editor($preview.html()) );
    });
});
 

but it doesn't work .

Can I use this snippet for markdown editor and what should I change ?

Q2A version: 1.5.4

Answer 1

I managed to do it a different way. Goto Markdown.Editor.js and look after an input event function, let's say  the following function

           util.addEvent(panels.input, "keypress", function (event) {
                // keyCode 89: y
                // keyCode 90: z
                if ((event.ctrlKey || event.metaKey) && (event.keyCode == 89 || event.keyCode == 90)) {
                    event.preventDefault();
                }
            });
and then modify it to get your mathjax updated as follows:

           util.addEvent(panels.input, "keypress", function (event) {
                // keyCode 89: y
                // keyCode 90: z
                if ((event.ctrlKey || event.metaKey) && (event.keyCode == 89 || event.keyCode == 90)) {
                    event.preventDefault();
                }
                var previewID=this.id.replace("input","preview");
                window.setTimeout(function(){MathJax.Hub.Queue(["Typeset", MathJax.Hub, previewID]);},10);     
            });

The purpose of the setTimeout is confirm MathJax run after the keypress event is passed. I sat it to 10 ms, but you may change it to match your needs.

This way is not as efficient as that of stack exchange but works well.

Answer 2

Another simpler way is to run the function on keyup event by adding the following new function into Markdown.Editor.js:

            util.addEvent(panels.input, "keyup", function () {
                var previewID=this.id.replace("input","preview");
                MathJax.Hub.Queue(["Typeset", MathJax.Hub, previewID]);
            });

Answer 3

Pilule De Propecia Pas Cher Cialis Tadalafil Sur Internet  <a href=http://tadalafbuy.com>buy cialis</a> Black Market Predisone Buy Cheap Prednisone

Answer 4

Dosage Amoxicillin Bacterial Infection Cat  <a href=http://cialicost.com>cialis</a> Cialis 10 Doctissimo Xlpharmacy Canada