Math.js with Katex and MathJax

Rendering with Katex with a MathJax fallback.

by ramnathv

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mathjs/1.4.0/math.min.js"></script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.2.0/katex.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.2.0/katex.min.js"></script>
<h1>
  Expression evaluation with math.js, pretty printing with KaTex with MathJax fallback.
</h1>

<table>
    <tr>
        <th>Expression</th>
        <td>
            <input type="text" id="expr" />
        </td>
    </tr>
    <tr>
        <th>Format</th>
        <td>
            <div id="format"></div>
        </td>
    </tr>
    <tr>
        <th>Result</th>
        <td>
            <div id="result"></div>
        </td>
    </tr>
</table>
<div id="output"></div>

CSS

body, html, table td, table th, input[type=text] {
    font-size: 11pt;
    font-family: verdana, arial, sans-serif;
}
h1 {
    font-size: 11pt;
}
input[type=text] {
    padding: 5px;
    width: 400px;
}
table {
    border-collapse: collapse;
}
table td, table th {
    padding: 5px;
    border: 1px solid lightgray;
}
table th {
    background-color: lightgray;
}

JavaScript

var expr = document.getElementById('expr'),
      format = document.getElementById('format'),
      result = document.getElementById('result');

  var texexp = '';

  // initialize with an example expression
  expr.value = 'sqrt(75 / 3) + det([[-1, 2], [3, 1]]) - sin(pi / 4)^2';
  texexp = math.parse(expr.value).toTex();
  try {
      katex.render(texexp, format);
  } catch (err) {
      out('using mathjax');
      format.innerHTML = '$$' + texexp + '$$';
  }
  result.innerHTML = math.eval(expr.value);

  expr.addEventListener("keypress", function (event) {
      if (event.keyCode === 13) {
          var node = null;
          var latex;

          try {
              // parse the expression
              node = math.parse(expr.value);

              // evaluate the result of the expression
              // plain string way
              //result.innerHTML = node.compile(math).eval();
              // tex output
              var temp = node.compile(math).eval().toString();
              //result.innerHTML = katex.renderToString(math.parse(temp).toTex());
              result.innerHTML = katex.renderToString(temp);
          } catch (err) {
              result.innerHTML = '<span style="color: red;">' + err.toString() + '</span>';
          }

          try {
              // export the expression to LaTeX
              latex = node ? node.toTex() : '';
              out(latex);
          } catch (err) {}

          try {
              katex.render(latex, format);
          } catch (err) {
              out('using mathjax');
              format.innerHTML = '$$' + texexp + '$$';
              MathJax.Hub.Queue(["Typeset", MathJax.Hub, format]);
          }
      }
  });

  function out() {
      var args = Array.prototype.slice.call(arguments, 0);
      document.getElementById('output').innerHTML += args.join(" ") + "\n";
  }