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