forked from mathjax/MathJax-demos-web
-
Notifications
You must be signed in to change notification settings - Fork 0
/
input-mml2chtml.html
92 lines (85 loc) · 2.16 KB
/
input-mml2chtml.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width">
<title>MathJax v3 with interactive MathML input and HTML output</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/mml-chtml.js"></script>
<script>
function convert() {
//
// Get the MathML input string, and clear any previous output
//
var input = document.getElementById("input").value.trim();
output = document.getElementById('output');
output.innerHTML = '';
//
// Convert the MathML to an HTML node and append it to the output
//
output.appendChild(MathJax.mathml2chtml(input));
//
// Then update the document to include the adjusted CSS for the
// content of the new equation.
//
MathJax.startup.document.clear();
MathJax.startup.document.updateDocument();
}
</script>
<Style>
#frame {
max-width: 40em;
margin: auto;
}
#input {
border: 1px solid grey;
margin: 0 0 .25em;
width: 100%;
box-sizing: border-box;
}
#output {
font-size: 120%;
margin-top: .75em;
border: 1px solid grey;
padding: .25em;
min-height: 2em;
}
.right {
float: right;
}
</style>
</head>
<body>
<div id="frame">
<h1>MathJax v3: MathML to HTML</h1>
<textarea id="input" rows="20" cols="10">
<!-- Enter MathML below -->
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mi>x</mi> <mo>=</mo>
<mrow>
<mfrac>
<mrow>
<mo>−</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>−</mo>
<mn>4</mn><mi>a</mi><mi>c</mi>
</msqrt>
</mrow>
<mrow> <mn>2</mn><mi>a</mi> </mrow>
</mfrac>
</mrow>
<mtext>.</mtext>
</math></textarea>
<br />
<div class="right">
<input type="button" value="Render MathML" id="render" onclick="convert()" />
</div>
<br clear="all" />
<div id="output"></div>
</div>
</body>
</html>