MathJax 消息转换器

Question

我想使用 MathJax 将 x^2=\frac{x}{3} 之类的代码转换为美观的数学方程式。我可以使用 HTML 来执行此操作（如下所示，即查看 HTML 部分底部附近的脚本部分）。但是，我希望能够使用消息功能执行此操作，并在我键入它并单击“发送”按钮后进行传输。我该如何编辑此代码来执行此操作？

var messages = document.getElementById("messages");
var textbox = document.getElementById("textbox");
var button = document.getElementById("button");
function latex(){
     var TypedMath;
     var newMessage = document.createElement("li");
     TypedMath="To the right is the textbox value that is attached to this message, I want it to be nice looking math equations. I think the MathJax script goes here."+textbox.value;
     newMessage.innerHTML = TypedMath;
     messages.appendChild(newMessage);
     textbox.value = "";
}
button.addEventListener("click", latex);

<html>
<ul id="messages"></ul>
<input id="textbox" type="text">
<button id="button">Send</button>
<script src="script.js"></script>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async
            src="https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js">
    </script>
  </head>
  <body>
  <p>
    I like to be able to type math, e.g. \(x^2=\frac{x}{3}\).
  </p>
  </body>
  </html>

Answer 1

下面的例子就是我认为你想要的。

var input = document.getElementById('textbox');
var output = document.getElementById('preview');
var button = document.getElementById('button');
output.innerHTML = input.value.trim();
const typesetInput = function() {
  button.disabled = true;
  output.innerHTML = input.value.trim();
  //MathJax.texReset();
  //MathJax.typesetClear();
  MathJax.typesetPromise([output]).catch(function(err) {
    output.innerHTML = '';
    output.appendChild(document.createTextNode(err.message));
    console.error(err);
  }).then(function() {
    button.disabled = false;
    input.value = "";
  });
}

<html>
<ul id="messages"></ul>
<input id="textbox" type="text" value="\(x^2=\frac{x}{3}\)">
<button id="button" onclick="typesetInput()">Send</button>
<script src="script.js"></script>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js">
  </script>
</head>

<body>
  <p id="preview">
    I like to be able to type math, e.g. \(x^2=\frac{x}{3}\).
  </p>
</body>

</html>

MathJax 消息转换器

MathJax Message Converter

html

javascript

mathjax