UNPKG

3.46 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <title>math.js | printing HTML</title>
6
7 <script src="../../lib/browser/math.js"></script>
8
9 <style>
10 body {
11 font-size: 11pt;
12 font-family: verdana, arial, sans-serif;
13 }
14
15 h1 {
16 font-size: 1rem;
17 }
18
19 fieldset {
20 display: inline;
21 margin: 0 50px 10px 0;
22 padding: 0;
23 border: none;
24 }
25
26 input[type=text] {
27 font-size: 11pt;
28 font-family: verdana, arial, sans-serif;
29 padding: 5px;
30 width: calc(100% - 14px);
31 }
32
33 label {
34 margin: 0 5px 0 0;
35 }
36
37 table {
38 width: 100%;
39 border-collapse: collapse;
40 }
41
42 table td,
43 table th {
44 padding: 5px;
45 border: 1px solid LightGrey;
46 }
47
48 table th {
49 background-color: LightGrey;
50 }
51
52 /* style the HTML output */
53 .math-function {
54 color: Purple;
55 font-weight: bold;
56 }
57
58 .math-number {
59 color: Blue;
60 }
61
62 .math-boolean {
63 color: Green;
64 }
65
66 .math-string {
67 color: Grey;
68 }
69
70 .math-string::before,
71 .math-string::after {
72 content: "\"";
73 }
74
75 .math-property {
76 font-style: italic;
77 }
78
79 .math-explicit-binary-operator::before,
80 .math-explicit-binary-operator::after {
81 content: " ";
82 }
83
84 .math-separator::after,
85 .math-assignment-operator::after {
86 content: " ";
87 }
88 </style>
89</head>
90<body>
91<h1>Expression evaluation and HTML code generation with math.js</h1>
92<form>
93 <fieldset>
94 Parenthesis option:
95 <label><input type="radio" name="parenthesis" value="keep" checked>keep</label>
96 <label><input type="radio" name="parenthesis" value="auto">auto</label>
97 <label><input type="radio" name="parenthesis" value="all">all</label>
98 </fieldset>
99 <fieldset>
100 Implicit multiplication:
101 <label><input type="radio" name="implicit" value="hide" checked>hide</label>
102 <label><input type="radio" name="implicit" value="show">show</label>
103 </fieldset>
104</form>
105<table>
106 <tr>
107 <th>Expression</th>
108 <td><input type="text" id="expr"/></td>
109 </tr>
110 <tr>
111 <th>Result</th>
112 <td><div id="result"></div></td>
113 </tr>
114 <tr>
115 <th>HTML output</th>
116 <td><div id="output">$$$$</div></td>
117 </tr>
118 <tr>
119 <th>HTML code</th>
120 <td><div id="code">$$$$</div></td>
121 </tr>
122</table>
123<script>
124 const expr = document.getElementById('expr')
125 const output = document.getElementById('output')
126 const code = document.getElementById('code')
127 const result = document.getElementById('result')
128 let options = {parenthesis: 'keep', implicit: 'hide'}
129
130 // initialize with an example expression
131 expr.value = 'sqrt(75/3)+det([[-1,2],[3,1]])-sin(pi/4)^2'
132
133 function print () {
134 let parsed = null
135
136 try {
137 // parse the expression
138 parsed = math.parse(expr.value)
139
140 // evaluate the result of the expression
141 result.innerHTML = math.format(parsed.compile().evaluate())
142
143 // print the HTML output
144 const html = math.parse(expr.value).toHTML(options)
145 output.innerHTML = html
146
147 // print the HTML code
148 code.innerHTML = html.replace(/</g, '&lt;').
149 replace(/>/g, '&gt;').
150 replace(/&lt;\/span&gt;/g, '&lt;/span&gt;<br />')
151 }
152 catch (err) {
153 result.innerHTML = '<span style="color: red;">' + err.toString() + '</span>'
154 }
155 }
156
157 window.onload = print
158 expr.oninput = print
159
160 // make the controls work
161 const controls = document.querySelectorAll('input[type=radio]')
162 controls.forEach(function (control) {
163 control.onclick = function() {
164 options[control.name] = control.value
165 print()
166 }
167 })
168</script>
169</body>
170</html>