1 | <!DOCTYPE html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | <meta charset="utf-8">
|
5 | <title>math.js | pretty printing with MathJax</title>
|
6 |
|
7 | <script src="../../lib/browser/math.js"></script>
|
8 | <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
|
9 | <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
|
10 |
|
11 | <style>
|
12 | body,
|
13 | html,
|
14 | table td,
|
15 | table th,
|
16 | input[type=text] {
|
17 | font-size: 11pt;
|
18 | font-family: verdana, arial, sans-serif;
|
19 | }
|
20 |
|
21 | h1 {
|
22 | font-size: 11pt;
|
23 | }
|
24 |
|
25 | input[type=text] {
|
26 | padding: 5px;
|
27 | width: 400px;
|
28 | }
|
29 |
|
30 | table {
|
31 | border-collapse: collapse;
|
32 | }
|
33 |
|
34 | table td,
|
35 | table th {
|
36 | padding: 5px;
|
37 | border: 1px solid lightgray;
|
38 | }
|
39 |
|
40 | table th {
|
41 | background-color: lightgray;
|
42 | }
|
43 |
|
44 | </style>
|
45 | </head>
|
46 | <body>
|
47 |
|
48 | <h1>
|
49 | Expression evaluation with math.js, pretty printing with MathJax
|
50 | </h1>
|
51 |
|
52 | <table>
|
53 | <tr>
|
54 | <th>Expression</th>
|
55 | <td><input type="text" id="expr"/></td>
|
56 | </tr>
|
57 | <tr>
|
58 | <th>Pretty print</th>
|
59 | <td><div id="pretty"></div></td>
|
60 | </tr>
|
61 | <tr>
|
62 | <th>Result</th>
|
63 | <td><div id="result"></div></td>
|
64 | </tr>
|
65 | </table>
|
66 | <b>Parenthesis option:</b>
|
67 | <input type="radio" name="parenthesis" value="keep" onclick="parenthesis = 'keep'; expr.oninput();" checked>keep
|
68 | <input type="radio" name="parenthesis" value="auto" onclick="parenthesis = 'auto'; expr.oninput();">auto
|
69 | <input type="radio" name="parenthesis" value="all" onclick="parenthesis = 'all'; expr.oninput();">all
|
70 | <br/>
|
71 | <b>Implicit multiplication:</b>
|
72 | <input type="radio" name="implicit" value="hide" onclick="implicit = 'hide'; expr.oninput();" checked>hide
|
73 | <input type="radio" name="implicit" value="show" onclick="implicit = 'show'; expr.oninput();">show
|
74 |
|
75 |
|
76 | <script>
|
77 | const expr = document.getElementById('expr')
|
78 | const pretty = document.getElementById('pretty')
|
79 | const result = document.getElementById('result')
|
80 | let parenthesis = 'keep'
|
81 | let implicit = 'hide'
|
82 |
|
83 | const mj = function (tex) {
|
84 | return MathJax.tex2svg(tex, {em: 16, ex: 6, display: false});
|
85 | }
|
86 |
|
87 |
|
88 | expr.value = 'sqrt(75 / 3) + det([[-1, 2], [3, 1]]) - sin(pi / 4)^2'
|
89 | pretty.innerHTML = '';
|
90 | pretty.appendChild(mj(math.parse(expr.value).toTex({parenthesis: parenthesis})));
|
91 | result.innerHTML = math.format(math.evaluate(expr.value))
|
92 |
|
93 | expr.oninput = function () {
|
94 | let node = null
|
95 |
|
96 | try {
|
97 |
|
98 | node = math.parse(expr.value)
|
99 |
|
100 |
|
101 | result.innerHTML = math.format(node.compile().evaluate())
|
102 | }
|
103 | catch (err) {
|
104 | result.innerHTML = '<span style="color: red;">' + err.toString() + '</span>'
|
105 | }
|
106 |
|
107 | try {
|
108 |
|
109 | const latex = node ? node.toTex({parenthesis: parenthesis, implicit: implicit}) : ''
|
110 | console.log('LaTeX expression:', latex)
|
111 |
|
112 |
|
113 | MathJax.typesetClear();
|
114 | pretty.innerHTML = '';
|
115 | pretty.appendChild(mj(latex));
|
116 | }
|
117 | catch (err) {}
|
118 | }
|
119 | </script>
|
120 |
|
121 | </body>
|
122 | </html>
|