forked from mathjax/MathJax-demos-web
-
Notifications
You must be signed in to change notification settings - Fork 0
/
input-tex_mml2svg.html
126 lines (118 loc) · 3 KB
/
input-tex_mml2svg.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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!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 TeX and MathML input and SVG output</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script>
MathJax = {
tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]},
svg: {fontCache: 'global'},
startup: {
ready: function () {
MathJax.startup.defaultReady();
document.getElementById('render').disabled = false;
}
}
}
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-svg.js"></script>
<script>
function convert() {
//
// Get the input (it is HTML containing delimited TeX math
// and/or MathML tags
//
var input = document.getElementById("input").value.trim();
//
// Disable the render button until MathJax is done
//
var button = document.getElementById("render");
button.disabled = true;
//
// Clear the old output
//
output = document.getElementById('output');
output.innerHTML = input;
//
// Reset the tex labels (and automatic equation numbers, though there aren't any here).
// Reset the typesetting system (font caches, etc.)
// Typeset the page, using a promise to let us know when that is complete
//
MathJax.texReset();
MathJax.typesetClear();
MathJax.typesetPromise()
.catch(function (err) {
//
// If there was an internal error, put the message into the output instead
//
output.innerHTML = '';
output.appendChild(document.createElement('pre')).appendChild(document.createTextNode(err.message));
})
.then(function() {
//
// Error or not, re-enable the render button
//
button.disabled = false;
});
}
</script>
<style>
#frame {
max-width: 40em;
margin: auto;
}
#input {
border: 1px solid grey;
margin: 0 0 .25em;
width: 100%;
box-sizing: border-box;
}
#output {
margin-top: .75em;
border: 1px solid grey;
padding: .25em;
min-height: 2em;
}
#output > pre {
margin-left: 5px;
}
.right {
float: right;
}
</style>
</head>
<body>
<div id="frame">
<h1>MathJax v3: TeX & MathML to SVG</h1>
<textarea id="input" rows="15" cols="10">
<!-- Enter HTML containing TeX or MathML below -->
If $a \ne 0$, then $ax^2 + bx + c = 0$ has two solutions,
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
As MathML:
<math>
<mi>a</mi>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mi>b</mi>
<mi>x</mi>
<mo>+</mo>
<mi>c</mi>
<mo>=</mo>
<mn>0</mn>
</math>.
</textarea>
<br />
<div class="right">
<input type="button" value="Render HTML" id="render" onclick="convert()" disabled />
</div>
<br clear="all" />
<div id="output"></div>
</div>
</body>
</html>