Question

我需要在HTML页面中通过MathJax渲染LaTex公式。如果我以这种方式<p id="input_int">\(int(x^2+1,x)\)</p>添加公式，它就会变得很好。

但是如果我需要在加载页面之后呈现它，例如<div id="input_latex_int" >\(\)</div>

<script type="text/javascript">
  $(document).ready(function () {  

  displayLatex('input_int', "input_latex_int"); 

  function displayLatex(boxName, out) { 
      var math = $('#'+boxName).text();
      math=math.replace("\\(",""); 
      math=math.replace("\\)",""); 
       var tree = MathLex.parse(math); 
       var latex = MathLex.render(tree, 'latex'); 
       var el=document.getElementById(out).innerHTML=latex;
       MathJax.Hub.Queue(['Typeset', MathJax.Hub,el]);     
  }...

如果我需要从服务器加载数学公式并在HTML页面上呈现它。这里我使用MathLex解析器将MathLex表达式转换为LaTex表单，我试图通过MathJax.Hub.Queue渲染它。结果如下：

我是Web开发/ LaTeX的新手，我正在为我的任务编写它。我无法理解 MathJax.Hub.Queue 是如何工作的。 MatJax文档太复杂了。有人可以像傻瓜一样解释它。或者也许是一个很好的链接示例。感谢。

下面我添加了我的程序的完整示例代码。

＆＃13;

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>test1</title>    
  
  <!--<script src="js/jquery-3.3.1.min.js"></script>-->
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
  <!----><script type="text/x-mathjax-config">
  MathJax.Hub.Config({
       
});
</script>
<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=TeX-MML-AM_CHTML">
</script>
 
    <!--MATHJAX include -->

<!--MATHLEX include -->
<script src="js/mathlex.js"></script>
<!--<script src="MathJax/MathJax.js"></script>-->
<script  src="js/index.js"></script>
    <!--AJAX include -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

</head>


<body>
<h1>Sage Demonstrator </h1>
Input Mathlex lang: (Integral)<p id="input_sage_eq">\(solve(x^2 + 1, x)\)</p>
Input Mathlex lang.: (Equation)<p id="input_sage_int">\(int(x^2+1,x)\)</p> <!--sum(x,x,0,4) int(x^2,x)-->
<br> Input Latex via MathJax: (Integral)<div id="input_latex_int" >\(\)</div>
<br> Input Latex via MathJax: (Equation)<div id="input_latex_eq" ">\(\)</div>
<br> 
 <input type="button" id="send-math" value="Calculate" /><br>
<br>
<h2> SEND Raw Sage Python expression to SageCell</h2>
<br> Output Latex via MathJax: (Integral)<div id="output_latex_int">\[\]</div>
<br> Output raw Sage line: (Integral)<div id="output_sageline_int">\(\)</div>
<br> Output Latex via MathJax:(Equation)<div id="output_latex_eq">\(\)</div>
<br> Output raw Sage line : (Equation)<div id="output_sageline_eq">\(\)</div>

<script type="text/javascript">
  $(document).ready(function () {  

  displayLatex('input_sage_int', "input_latex_int");
  displayLatex('input_sage_eq', "input_latex_eq"); 

  function displayLatex(boxName, out) { 
      var math = $('#'+boxName).text();
      math=math.replace("\\(",""); 
      math=math.replace("\\)",""); 
       var tree = MathLex.parse(math); 
       var latex = MathLex.render(tree, 'latex'); 
       var el=document.getElementById(out).innerHTML=latex;
       MathJax.Hub.Queue(['Typeset', MathJax.Hub,el]);     
  }



   $('#send-math').on('click', function (evt) {

        var mathEqSage = "solve(x^2 + 1, x)";
        var mathIntSage = "int(x^2+1,x)";    
        var tree = MathLex.parse(mathIntSage),
        sageCode = MathLex.render(tree, 'sage');
      
     
     $.post("http://aleph.sagemath.org/service?callback=?",
      { code: 'print latex('+mathEqSage+')' }, function(data){
        document.getElementById("output_latex_eq").innerHTML=data.stdout;
    });
      $.post("http://aleph.sagemath.org/service?callback=?",
      { code: 'print '+mathEqSage }, function(data){
        document.getElementById("output_sageline_eq").innerHTML=data.stdout;
    });
        $.post("http://aleph.sagemath.org/service?callback=?",
      { code: 'print latex('+sageCode+')' }, function(data){
        document.getElementById("output_latex_int").innerHTML=data.stdout;
    });
      $.post("http://aleph.sagemath.org/service?callback=?",
      { code: 'print '+sageCode }, function(data){
        document.getElementById("output_sageline_int").innerHTML=data.stdout;
    });                   
  });
});//ready ends
</script>

</body>
</html>

＆＃13;

如何在页面准备好后通过MathJax呈现用LaTeX编写的公式

0 个答案: