动态添加的 MathJax(LATEX) 元素未在浏览器中呈现

Question

尝试动态生成 LATEX 表示法以使用符号数学。通过使用浏览器“inspect”检查输出，结果输出似乎是正确的，但由于它的执行是异步运行的，在名为“output”的 DIV 元素中写入文本。

最终文本，屏幕上显示的字符串是：\(\Delta^{y}_{l}\) 并且没有显示预期的图形 MathJax 元素。

当使用另一个元素测试标准 HTML 输入时，符号渲染工作正常并且 MathJax 小部件内显示图形增量符号，所以我的结论是 MathJax 处于活动状态。

HTML 来源是：

<div id="output" class="mathjax"></div)
<py-script output="output">
.. script 
print("\(" + mylatexstr +  "\)")

在 DIV 内部使用 pyscript & sympy 动态生成的输出下方，由 inspect 显示：

<div id="output" class="mathjax"> ... 
<script type="math/tex" id="MathJax-Element-1">\Delta^{y}_{l}</script>

我添加了一个函数来触发 MathJax 的重新加载，以在 HTML 页面加载结束时呈现所有挂起的元素：

<script>
function update_mathjax(){
    MathJax.Hub.Queue(['Typeset',MathJax.Hub,'output']);
}
window.onload = function() {
    //everything is loaded
    update_mathjax()
}; 
</script>     
</body)

似乎缺少触发MathJax渲染功能的东西脚本输出完成后。感谢您的支持或见解。

完整代码：

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">
  <title>PyScript Demo</title>
  <!--<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />-->
  <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [ ['$','$'], ["\(","\)"] ],
      processEscapes: true
    }
  });
</script>    
<script type="text/javascript"
        src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>    
      <py-env>
- sympy         
      </py-env>    
</head>
<body>

<div id="output" class="mathjax">\(\Delta^{y}_{l}\)</div>

<py-script output="output">
from sympy import *
import sympy.printing as printing
init_printing(use_latex=True)    
delta__y_l = symbols('Delta__y_l') 
mylatexstr = str(latex(delta__y_l))     
# print("\(" + mylatexstr +  "\)") 
print("$$" + mylatexstr +  "$$")    
</py-script> 
<script>
function update_mathjax(){
    MathJax.Hub.Queue(['Typeset',MathJax.Hub,'output']);
}
window.onload = function() {
    update_mathjax()
};        
</script>
</body>    
</html>

Answer 1

解决你的问题的关键是对结果进行排版。仅仅打印输出是行不通的。

此 JavaScript 函数将与 MathJax 交互以绘制结果。参数str就是你的mylatexstr.

function draw(str) {
        var math = MathJax.Hub.getAllJax("MathDiv")[0];
        MathJax.Hub.Queue([ "Text", math, str ]);
}

第二个关键项是定义绘制结果的位置。这需要一定的语法。我的 JavaScript 绘图函数需要匹配的 div ID (MathDiv)。您当然可以更改 ID。在这两个位置都这样做。

<div id="MathDiv">\({}\)</div>

接下来，我简化了您的 Python 代码以使用我的自定义绘制函数正确绘制：

<py-script>
import js
from sympy import *

delta__y_l = symbols('Delta__y_l')
mylatexstr = latex(delta__y_l)

js.draw(mylatexstr)

</py-script>

我稍微清理了你的原始代码，删除了不必要的部分，并删除了硬编码的公式。

你可以在我的网站上看到一个有效的演示：link如果你有错误，right-click在我的演示上并复制页面代码。

完整示例：

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">
  <title>PyScript Demo</title>
  <!--<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />-->
  <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {
        inlineMath: [ ['$','$'], ["\(","\)"] ],
        processEscapes: true
      }
    });
  </script>
  <script type="text/javascript"
    src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
  </script>

  <py-env>
    - sympy
  </py-env>
</head>
<body>

<div id="MathDiv">\({}\)</div>

<py-script>
import js
from sympy import *

delta__y_l = symbols('Delta__y_l')
mylatexstr = latex(delta__y_l)

js.draw(mylatexstr)

</py-script> 
<script>

function draw(str) {
    var math = MathJax.Hub.getAllJax("MathDiv")[0];
    MathJax.Hub.Queue([ "Text", math, str ]);
}

</script>
</body>
</html>

动态添加的 MathJax(LATEX) 元素未在浏览器中呈现

Dynamically added MathJax(LATEX) Element is not rendering in Browser

html

javascript

mathjax

pyscript