UNPKG

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