Загрузка MathJax динамически - PullRequest
Новая
       8

Загрузка MathJax динамически

0 голосов
/ 12 марта 2020

Я только что наткнулся на Mathjax, и мне нужно реализовать что-то вроде этого: http://bandicoot.maths.adelaide.edu.au/MathJax/test/sample-dynamic-2.html

Это не работает, когда я копирую исходный код и сохраняю его на своем p c. Я получаю сообщение об ошибке: MathJax.Callback is not a function

вот файл, который у меня есть: https://pastebin.com/jYgHCpkH

1 Ответ

1 голос
/ 15 марта 2020

Вы загружаете неправильный JS код из CDN. Замените ваш JS CDN следующим URL: http://bandicoot.maths.adelaide.edu.au/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic Preview of Textarea with MathJax Content</title>
    <!-- Copyright (c) 2012 Design Science, Inc. -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        showProcessingMessages: false,
        tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }
      });
    </script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" src="http://bandicoot.maths.adelaide.edu.au/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 setTimout 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>
  </head>
  <body>
    Type text in the box below:<br />

    <textarea
      id="MathInput"
      cols="60"
      rows="10"
      onkeyup="Preview.Update()"
      style="margin-top:5px"
    >
    </textarea>
    <br /><br />
    Preview is shown here:
    <div
      id="MathPreview"
      style="border:1px solid; padding: 3px; width:50%; margin-top:5px"
    ></div>
    <!-- <div id="MathBuffer" style="border:1px solid; padding: 3px; width:50%; margin-top:5px; 
    visibility:hidden; position:absolute; top:0; left: 0"><div>

    <script>
    Preview.Init();
    </script> -->

    <div
      id="MathBuffer"
      style="border:1px solid; padding: 3px; width:50%; margin-top:5px; 
visibility:hidden; position:absolute; top:0; left: 0"
    >
      <div>
        <script>
          Preview.Init();
        </script>
      </div>
    </div>
  </body>
</html>

Приведенный выше код не должен вызывать ошибок.

...