UNPKG

2.93 kBHTMLView Raw
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 // initialize with an example expression
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 // parse the expression
92 node = math.parse(expr.value)
93
94 // evaluate the result of the expression
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 // export the expression to LaTeX
103 const latex = node ? node.toTex({parenthesis: parenthesis, implicit: implicit}) : ''
104 console.log('LaTeX expression:', latex)
105
106 // display and re-render the expression
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>