CODEWITHSUNDEEP
mathjax
Wolk
Wolk

Reputation: 120

MathJax.HTML.Element() doesn't work

MathJax.HTML.Element() does not convert the provided code. The source is just appended after doing 

 .appendChild(MathJax.HTML.Element("div",{id: "MathDiv",
style:{border:"1px solid", padding:"5px"}},
["Here is math: \\(x+1\\)",["br"],"and a display $$x+1\\over x-1$$"] ));

Neither does 

MathJax.HTML.addElement((document.getElementsByClassName("equations")[0]),"div",
{id: "MathDiv", 
style:{border:"1px solid", padding:"5px"}},
["Here is math: \\(x+1\\)",["br"],"and a display $$x+1\\over x-1$$"])

work. Different browsers used.

Upvotes: 1

Views: 821

Answers (1)

Salix alba
Salix alba

Reputation: 7824

Are you getting anything to work with MathJax. Have you got a normal equation in the text of the page between $$ tags to work? MathJax normally processes the equations after the page has loaded. By dynamically adding elements you might need to call MathJax.Hub.Queue(["Typeset",MathJax.Hub,'outputDiv']); after adding to force the rendering of the maths.

<html>
<head>
<title>Jep: Creating mathml from expressions</title>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script type="text/javascript">
    MathJax.Hub.Config({
        jax : [ "input/TeX", "output/HTML-CSS" ],
        extensions : [ "tex2jax.js" ],
        "HTML-CSS" : {
            scale : 150
        },
        styles : {
            ".MathJax_Display" : {
                "text-align" : "left !important",
                margin : "1em 0em"
            }
        },
        tex2jax : {
            inlineMath : [ [ '$', '$' ], [ '\\(', '\\)' ] ]
        }
    });

    function render()
    {
      var res = "$e^{i\\pi}=-1$";
      var target = document.getElementById('outputDiv');
      target.innerHTML=res;
      MathJax.Hub.Queue(["Typeset",MathJax.Hub,'outputDiv']);
    }
</script>
</head>
<body>

<form>
<input type="button" value="Render" onClick="render();"/>
</form>

<div id="outputDiv" style="border:1px; font-size:x-large;">

</body>
</html>

Upvotes: 4

Related Questions