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="../../dist/math.js"></script>
|
8 | <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.3/MathJax.js?config=TeX-AMS-MML_HTMLorMML.js"></script>
|
9 |
|
10 | <style>
|
11 | body,
|
12 | html,
|
13 | table td,
|
14 | table th,
|
15 | input[type=text] {
|
16 | font-size: 11pt;
|
17 | font-family: verdana, arial, sans-serif;
|
18 | }
|
19 |
|
20 | h1 {
|
21 | font-size: 11pt;
|
22 | }
|
23 |
|
24 | input[type=text] {
|
25 | padding: 5px;
|
26 | width: 400px;
|
27 | }
|
28 |
|
29 | table {
|
30 | border-collapse: collapse;
|
31 | }
|
32 |
|
33 | table td,
|
34 | table th {
|
35 | padding: 5px;
|
36 | border: 1px solid lightgray;
|
37 | }
|
38 |
|
39 | table th {
|
40 | background-color: lightgray;
|
41 | }
|
42 |
|
43 | </style>
|
44 | </head>
|
45 | <body>
|
46 |
|
47 | <h1>
|
48 | Expression evaluation with math.js, pretty printing with MathJax
|
49 | </h1>
|
50 |
|
51 | <table>
|
52 | <tr>
|
53 | <th>Expression</th>
|
54 | <td><input type="text" id="expr"/></td>
|
55 | </tr>
|
56 | <tr>
|
57 | <th>Pretty print</th>
|
58 | <td><div id="pretty">$$$$</div></td>
|
59 | </tr>
|
60 | <tr>
|
61 | <th>Result</th>
|
62 | <td><div id="result"></div></td>
|
63 | </tr>
|
64 | </table>
|
65 | <b>Parenthesis option:</b>
|
66 | <input type="radio" name="parenthesis" value="keep" onclick="parenthesis = 'keep'; expr.oninput();" checked>keep
|
67 | <input type="radio" name="parenthesis" value="auto" onclick="parenthesis = 'auto'; expr.oninput();">auto
|
68 | <input type="radio" name="parenthesis" value="all" onclick="parenthesis = 'all'; expr.oninput();">all
|
69 | <br/>
|
70 | <b>Implicit multiplication:</b>
|
71 | <input type="radio" name="implicit" value="hide" onclick="implicit = 'hide'; expr.oninput();" checked>hide
|
72 | <input type="radio" name="implicit" value="show" onclick="implicit = 'show'; expr.oninput();">show
|
73 |
|
74 |
|
75 | <script>
|
76 | const expr = document.getElementById('expr')
|
77 | const pretty = document.getElementById('pretty')
|
78 | const result = document.getElementById('result')
|
79 | let parenthesis = 'keep'
|
80 | let implicit = 'hide'
|
81 |
|
82 |
|
83 | expr.value = 'sqrt(75 / 3) + det([[-1, 2], [3, 1]]) - sin(pi / 4)^2'
|
84 | pretty.innerHTML = '$$' + math.parse(expr.value).toTex({parenthesis: parenthesis}) + '$$'
|
85 | result.innerHTML = math.format(math.evaluate(expr.value))
|
86 |
|
87 | expr.oninput = function () {
|
88 | let node = null
|
89 |
|
90 | try {
|
91 |
|
92 | node = math.parse(expr.value)
|
93 |
|
94 |
|
95 | result.innerHTML = math.format(node.compile().evaluate())
|
96 | }
|
97 | catch (err) {
|
98 | result.innerHTML = '<span style="color: red;">' + err.toString() + '</span>'
|
99 | }
|
100 |
|
101 | try {
|
102 |
|
103 | const latex = node ? node.toTex({parenthesis: parenthesis, implicit: implicit}) : ''
|
104 | console.log('LaTeX expression:', latex)
|
105 |
|
106 |
|
107 | const elem = MathJax.Hub.getAllJax('pretty')[0]
|
108 | MathJax.Hub.Queue(['Text', elem, latex])
|
109 | }
|
110 | catch (err) {}
|
111 | }
|
112 | </script>
|
113 |
|
114 | </body>
|
115 | </html>
|