forked from mathjax/MathJax-demos-web
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinput-tex2chtml.html
114 lines (108 loc) · 3.13 KB
/
input-tex2chtml.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
<!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 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/tex-chtml.js"></script>
<script>
function convert() {
//
// Get the TeX input
//
var input = document.getElementById("input").value.trim();
//
// Disable the display and render buttons until MathJax is done
//
var display = document.getElementById("display");
var button = document.getElementById("render");
button.disabled = display.disabled = true;
//
// Clear the old output
//
output = document.getElementById('output');
output.innerHTML = '';
//
// Reset the tex labels (and automatic equation numbers, though there aren't any here).
// Get the conversion options (metrics and display settings)
// Convert the input to CommonHTML output and use a promise to wait for it to be ready
// (in case an extension needs to be loaded dynamically).
//
MathJax.texReset();
var options = MathJax.getMetricsFor(output);
options.display = display.checked;
MathJax.tex2chtmlPromise(input, options).then(function (node) {
//
// The promise returns the typeset node, which we add to the output
// Then update the document to include the adjusted CSS for the
// content of the new equation.
//
output.appendChild(node);
MathJax.startup.document.clear();
MathJax.startup.document.updateDocument();
}).catch(function (err) {
//
// If there was an error, put the message into the output instead
//
output.appendChild(document.createElement('pre')).appendChild(document.createTextNode(err.message));
}).then(function () {
//
// Error or not, re-enable the display and render buttons
//
button.disabled = display.disabled = false;
});
}
</script>
<style>
#frame {
max-width: 40em;
margin: auto;
}
#input {
border: 1px solid grey;
margin: 0 0 .25em;
width: 100%;
font-size: 120%;
box-sizing: border-box;
}
#output {
font-size: 120%;
margin-top: .75em;
border: 1px solid grey;
padding: .25em;
min-height: 2em;
}
#output > pre {
margin-left: 5px;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
</head>
<body>
<div id="frame">
<h1>MathJax v3: TeX to HTML</h1>
<textarea id="input" rows="15" cols="10">
%
% Enter TeX commands below
%
x = {-b \pm \sqrt{b^2-4ac} \over 2a}.
</textarea>
<br />
<div class="left">
<input type="checkbox" id="display" checked onchange="convert()"> <label for="display">Display style</label>
</div>
<div class="right">
<input type="button" value="Render TeX" id="render" onclick="convert()" />
</div>
<br clear="all" />
<div id="output"></div>
</div>
</body>
</html>