mathjs
Version:
Math.js is an extensive math library for JavaScript and Node.js. It features a flexible expression parser with support for symbolic computation, comes with a large set of built-in functions and constants, and offers an integrated solution to work with dif
123 lines (102 loc) • 3.08 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>math.js | pretty printing with MathJax</title>
<script src="../../lib/browser/math.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
<style>
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;
}
</style>
</head>
<body>
<h1>
Expression evaluation with math.js, pretty printing with MathJax
</h1>
<table>
<tr>
<th>Expression</th>
<td><input type="text" id="expr"/></td>
</tr>
<tr>
<th>Pretty print</th>
<td><div id="pretty"></div></td>
</tr>
<tr>
<th>Result</th>
<td><div id="result"></div></td>
</tr>
</table>
<b>Parenthesis option:</b>
<input type="radio" name="parenthesis" value="keep" onclick="parenthesis = 'keep'; expr.oninput();" checked>keep
<input type="radio" name="parenthesis" value="auto" onclick="parenthesis = 'auto'; expr.oninput();">auto
<input type="radio" name="parenthesis" value="all" onclick="parenthesis = 'all'; expr.oninput();">all
<br/>
<b>Implicit multiplication:</b>
<input type="radio" name="implicit" value="hide" onclick="implicit = 'hide'; expr.oninput();" checked>hide
<input type="radio" name="implicit" value="show" onclick="implicit = 'show'; expr.oninput();">show
<script>
const expr = document.getElementById('expr')
const pretty = document.getElementById('pretty')
const result = document.getElementById('result')
let parenthesis = 'keep'
let implicit = 'hide'
const mj = function (tex) {
return MathJax.tex2svg(tex, {em: 16, ex: 6, display: false});
}
// initialize with an example expression
expr.value = 'sqrt(75 / 3) + det([[-1, 2], [3, 1]]) - sin(pi / 4)^2'
pretty.innerHTML = '';
pretty.appendChild(mj(math.parse(expr.value).toTex({parenthesis: parenthesis})));
result.innerHTML = math.format(math.evaluate(expr.value))
expr.oninput = function () {
let node = null
try {
// parse the expression
node = math.parse(expr.value)
// evaluate the result of the expression
result.innerHTML = math.format(node.compile().evaluate())
}
catch (err) {
result.innerHTML = '<span style="color: red;">' + err.toString() + '</span>'
}
try {
// export the expression to LaTeX
const latex = node ? node.toTex({parenthesis: parenthesis, implicit: implicit}) : ''
console.log('LaTeX expression:', latex)
// display and re-render the expression
MathJax.typesetClear();
pretty.innerHTML = '';
pretty.appendChild(mj(latex));
}
catch (err) {}
}
</script>
</body>
</html>