在 html 中插入 'LATEX' - 动态文本

Question

我想通过 MathJax 在 html 文件中动态插入 'LATEX'-文本。

<html>
<head>
    <title>MathJax MathML Test Page</title>
    <script type="text/javascript"
        src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    </script>
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
                           tex2jax: {inlineMath: [["$","$"],["\(","\)"]]}
                           });
    </script>
</head>
<body>
    <div id="content" contenteditable="true" style="font-family: Helvetica">This is
    </div>
    <button onclick="myFunction()">Try it</button>
    <script>
    function myFunction() {
        var newP = document.createElement("p");
        newP.innerHTML = "\(ax^2 + bx + c = 0\)";
        my_div = document.getElementById("2");
        document.body.insertBefore(newP, my_div);
    }
    </script>
    <p id = '2'>
       \(ax^2 + bx + c = 0\)
    </p>
</body>

这段代码一切正常：

<p id = '2'>
   \(ax^2 + bx + c = 0\)
</p>

但是当我动态插入新段落时，我看到了错误的文字。对不起我的英语，但我实际上不知道如何解决它。

Answer 1

试试这个：

function myFunction() {
  var newP = document.createElement("p");
  newP.id = 'unique-id';
  newP.innerHTML = "\(ax^2 + bx + c = 0\)";
  my_div = document.getElementById("2");
  document.body.insertBefore(newP, my_div);
  MathJax.Hub.Queue(['Typeset', MathJax.Hub, 'unique-id']);
}

一些备注：

分隔符是 \( 和 \)，但是因为您将它们包含在 Javascript 字符串中，其中 \ 是特殊的，所以您需要使用两个反斜杠;
插入新的 <p> 元素后，您需要告诉 MathJax 对其进行排版，这就是 MathJax.Hub.Queue(...) 所做的；它被赋予了新创建元素的 id，虽然这不是绝对必要的（但它是更快）；请注意，id 必须是唯一的；
2 的 ID 在 HTML 中无效；

在 html 中插入 'LATEX' - 动态文本

Insert 'LATEX' - text dynamically in html

html

javascript

mathjax