itutor-mathlive
Version:
Beautifully typeset math made easy
59 lines (52 loc) • 1.49 kB
HTML
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>MathLive Basic Example</title>
<link rel="stylesheet" href="../../dist/mathlive.core.css">
<link rel="stylesheet" href="../../dist/mathlive.css">
<style>
body {
font-family: sans-serif;
color: #444;
background-color: #f9f9f9;
}
main {
max-width: 820px;
margin: auto;
}
.mathfield {
border: 1px solid #ddd;
padding:5px;
margin: 10px 0 10px 0;
border-radius:5px;
background-color: #fff;
}
#output {
padding:5px;
margin: 200px 0 10px 0;
border-radius:5px;
border: 1px solid #000;
font-family: "Source Code Pro", Menlo, "Bitstream Vera Sans Mono", Monaco, Courier, "Andale Mono", monospace;
color: #f0c674;
background: #35434e;
}
</style>
</head>
<body>
<main>
<h2>MathLive Basic Example</h2>
<div class="mathfield" id='mf' >f(x)=</div>
<div id='output'></div>
</main>
<script src="../../dist/mathlive.js"></script>
<script>
(function() {
const mf = MathLive.makeMathField('mf', {
onContentDidChange: updateOutput
});
function updateOutput(mathfield) {
document.getElementById('output').innerHTML = mathfield.latex();
}
})();
</script>
</body></html>