Why does MathJax appear to toggle on and off as I type LaTeX?

StackOverflow https://stackoverflow.com/questions/23585648

  •  19-07-2023
  •  | 
  •  

Question

I have "borrowed" the code below from other sources. As far as I can tell it is basically the same as this MathJax demo page. The problem I'm having is that I don't see the results I have typed for odd numbered key presses. For example, when I type the first character I don't see anything in the MathPreview div. But, I see the first two characters after typing the second character. This pattern repeats so that it is as if MathJax toggles on for even key presses, but it turns off for odd numbered key presses. Any ideas why this is happening? This doesn't occur on the demo page I linked to above.

<!DOCTYPE html>
<html>
<head>
    <title>Mathematics</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="assets/css/styles.css">
    <script src="bower_components/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <script>
        var Preview = {
            delay: 150,        // delay after keystroke before updating
            preview: null,     // filled in by Init below
            buffer: null,      // filled in by Init below
            timeout: null,     // store setTimeout id
            mjRunning: false,  // true when MathJax is processing
            oldText: null,     // used to check if an update is needed

            //  Get the preview and buffer DIV's
            Init: function () {
                this.preview = document.getElementById("MathPreview");
                this.buffer = document.getElementById("MathBuffer");
            },

            //  Switch the buffer and preview, and display the right one.
            //  (We use visibility:hidden rather than display:none since
            //  the results of running MathJax are more accurate that way.)
            SwapBuffers: function () {
                var buffer = this.preview, preview = this.buffer;
                this.buffer = buffer; this.preview = preview;
                buffer.style.visibility = "hidden"; buffer.style.position = "absolute";
                preview.style.position = ""; preview.style.visibility = "";
            },

            //  This gets called when a key is pressed in the textarea.
            //  We check if there is already a pending update and clear it if so.
            //  Then set up an update to occur after a small delay (so if more keys
            //    are pressed, the update won't occur until after there has been
            //    a pause in the typing).
            //  The callback function is set up below, after the Preview object is set up.
            Update: function () {
                if (this.timeout) {clearTimeout(this.timeout)}
                this.timeout = setTimeout(this.callback,this.delay);
            },

            //  Creates the preview and runs MathJax on it.
            //  If MathJax is already trying to render the code, return
            //  If the text hasn't changed, return
            //  Otherwise, indicate that MathJax is running, and start the
            //    typesetting.  After it is done, call PreviewDone.
            CreatePreview: function () {
                Preview.timeout = null;
                if (this.mjRunning) return;
                var text = document.getElementById("MathInput").value;
                if (text === this.oldtext) return;
                this.buffer.innerHTML = this.oldtext = text;
                this.mjRunning = true;
                MathJax.Hub.Queue(
                        ["Typeset",MathJax.Hub,this.buffer],
                        ["PreviewDone",this]
                );
            },

            //  Indicate that MathJax is no longer running,
            //  and swap the buffers to show the results.
            PreviewDone: function () {
                this.mjRunning = false;
                this.SwapBuffers();
            }
        };

        //  Cache a callback to the CreatePreview action
        Preview.callback = MathJax.Callback(["CreatePreview",Preview]);
        Preview.callback.autoReset = true;  // make sure it can run more than once
    </script>

    <script type="text/x-mathjax-config;executed=true">
        MathJax.Hub.Config({
            showProcessingMessages: false,
            tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }
        });
    </script>

</head>
<body>
    <div class="content">
        <div id="MathJax_Message" style="display: none;"></div>
        <div class="left_half_page">
            <div class="content">
                <div class="fill_with_padding">
                    <textarea class="content no_border" id="MathInput" onkeyup="Preview.Update()"></textarea>
                </div>
            </div>
        </div>
        <div class="right_half_page">
            <div class="content">
                <div class="fill_with_padding">
                    <div id="MathPreview" class="content">
                        <div id="MathBuffer">
                            <div>
                                <script>Preview.Init();</script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
Was it helpful?

Solution

The problem is that your MathBuffer and MathPreview are nested. They should be siblings. The code uses a double-buffering technique that shows one buffer while the other is being typeset, and then switches the two. One is displayed while the other is hidden. If one is inside the other, you will only see the result every other keystroke.

Also, note that the contents of the buffers are replaced by the input, and so when you replace the MathPreview buffer, you remove the MathBuffer and the script it contains. Note that in the MathJax page that you link to, the two div's (the MathPreview and MathBuffer) are not nested, and the initialization script occurs after both of them (not nested within them).

If you fix the nesting problems, I think it will work for you.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top