simple-squiggle

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

pretty_printing_with_mathjax.html (3084B)

      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="../../lib/browser/math.js"></script>
      8   <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
      9   <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
     10 
     11   <style>
     12     body,
     13     html,
     14     table td,
     15     table th,
     16     input[type=text] {
     17       font-size: 11pt;
     18       font-family: verdana, arial, sans-serif;
     19     }
     20 
     21     h1 {
     22       font-size: 11pt;
     23     }
     24 
     25     input[type=text] {
     26       padding: 5px;
     27       width: 400px;
     28     }
     29 
     30     table {
     31       border-collapse: collapse;
     32     }
     33 
     34     table td,
     35     table th {
     36       padding: 5px;
     37       border: 1px solid lightgray;
     38     }
     39 
     40     table th {
     41       background-color: lightgray;
     42     }
     43 
     44   </style>
     45 </head>
     46 <body>
     47 
     48 <h1>
     49   Expression evaluation with math.js, pretty printing with MathJax
     50 </h1>
     51 
     52 <table>
     53   <tr>
     54     <th>Expression</th>
     55     <td><input type="text" id="expr"/></td>
     56   </tr>
     57   <tr>
     58     <th>Pretty print</th>
     59     <td><div id="pretty"></div></td>
     60   </tr>
     61   <tr>
     62     <th>Result</th>
     63     <td><div id="result"></div></td>
     64   </tr>
     65 </table>
     66 <b>Parenthesis option:</b>
     67 <input type="radio" name="parenthesis" value="keep" onclick="parenthesis = 'keep'; expr.oninput();" checked>keep
     68 <input type="radio" name="parenthesis" value="auto" onclick="parenthesis = 'auto'; expr.oninput();">auto
     69 <input type="radio" name="parenthesis" value="all" onclick="parenthesis = 'all'; expr.oninput();">all
     70 <br/>
     71 <b>Implicit multiplication:</b>
     72 <input type="radio" name="implicit" value="hide" onclick="implicit = 'hide'; expr.oninput();" checked>hide
     73 <input type="radio" name="implicit" value="show" onclick="implicit = 'show'; expr.oninput();">show
     74 
     75 
     76 <script>
     77   const expr = document.getElementById('expr')
     78   const pretty = document.getElementById('pretty')
     79   const result = document.getElementById('result')
     80   let parenthesis = 'keep'
     81   let implicit = 'hide'
     82 
     83   const mj = function (tex) {
     84     return MathJax.tex2svg(tex, {em: 16, ex: 6, display: false});
     85   }
     86 
     87   // initialize with an example expression
     88   expr.value = 'sqrt(75 / 3) + det([[-1, 2], [3, 1]]) - sin(pi / 4)^2'
     89   pretty.innerHTML = '';
     90   pretty.appendChild(mj(math.parse(expr.value).toTex({parenthesis: parenthesis})));
     91   result.innerHTML = math.format(math.evaluate(expr.value))
     92 
     93   expr.oninput = function () {
     94     let node = null
     95 
     96     try {
     97       // parse the expression
     98       node = math.parse(expr.value)
     99 
    100       // evaluate the result of the expression
    101       result.innerHTML = math.format(node.compile().evaluate())
    102     }
    103     catch (err) {
    104       result.innerHTML = '<span style="color: red;">' + err.toString() + '</span>'
    105     }
    106 
    107     try {
    108       // export the expression to LaTeX
    109       const latex = node ? node.toTex({parenthesis: parenthesis, implicit: implicit}) : ''
    110       console.log('LaTeX expression:', latex)
    111 
    112       // display and re-render the expression
    113       MathJax.typesetClear();
    114       pretty.innerHTML = '';
    115       pretty.appendChild(mj(latex));
    116     }
    117     catch (err) {}
    118   }
    119 </script>
    120 
    121 </body>
    122 </html>