simple-squiggle

A restricted subset of Squiggle
Log | Files | Refs | README

printing_html.html (3464B)

      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>