Как визуализировать формулы, написанные в LaTeX через MathJax после того, как страница готова - PullRequest
Новая
       9

Как визуализировать формулы, написанные в LaTeX через MathJax после того, как страница готова

0 голосов
/ 21 мая 2018

Мне нужно визуализировать формулы LaTex через MathJax на HTML-странице.И будет хорошо, если я добавлю формулу таким образом <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.И результат выглядит следующим образом: enter image description here

Я новичок в веб-разработке / LaTeX, и я пишу это для моего задания.Я просто не могу понять, как MathJax.Hub.Queue работает.Документ MatJax слишком сложен.Может ли кто-нибудь объяснить это как для чайников.Или, может быть, хорошая ссылка с примером.Спасибо.

Ниже я добавил полный пример кода моей программы. 

<!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>
enter image description here
...