Skip to content

Instantly share code, notes, and snippets.

@sritchie
Created December 1, 2022 22:03
Show Gist options
  • Save sritchie/a7bb4a306a1e8c63b621d3186a07a654 to your computer and use it in GitHub Desktop.
Save sritchie/a7bb4a306a1e8c63b621d3186a07a654 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>MathLive Basic Example</title>
<style>
body {
color: #444;
background-color: #f9f9f9;
}
main {
max-width: 820px;
margin: auto;
}
math-field {
border: 1px solid #ddd;
padding: 5px;
margin: 10px 0 10px 0;
border-radius: 5px;
background-color: #fff;
}
#value,
#result {
padding: 5px;
border-radius: 5px;
border: 1px solid #000;
color: rgb(241, 188, 91);
background: #35434e;
font-family: monospace;
margin-bottom: 1em;
}
</style>
</head>
<body>
<main>
<h2>MathLive Basic Example</h2>
<math-field id="mf" virtual-keyboard-mode="manual">f(x)=</math-field>
<div id="value"></div>
<div id="result"></div>
</main>
<script type="module">
import { renderMathInElement } from '/dist/mathlive.mjs';
import { ComputeEngine } from 'https://unpkg.com/@cortex-js/compute-engine@latest/dist/compute-engine.min.esm.js';
document.getElementById('mf').addEventListener('input', (ev) => {
const mf = ev.target;
document.getElementById('value').innerHTML = mf.getValue();
document.getElementById('result').innerText = `${mf.getValue(
'math-json'
)}`;
renderMathInElement('result');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment