Skip to content

Instantly share code, notes, and snippets.

@mzechmeister
Created October 27, 2025 17:51
Show Gist options
  • Save mzechmeister/8d30811574dc341ab6663ca5fb9df417 to your computer and use it in GitHub Desktop.
Save mzechmeister/8d30811574dc341ab6663ca5fb9df417 to your computer and use it in GitHub Desktop.
MathLive to image
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/mathlive"></script>
</head>
<body>
<math-field id="mf">f(x) = \sin(x+\pi)</math-field><br>
<br>
<select id="fmt" onchange="update_fig()">
<option value="gif">png</option>
<option value="png">gif</option>
<option value="svg">svg</option>
</select>
<select id="dpi" onchange="update_fig()">
<option value="50">50</option>
<option value="100">100</option>
<option value="110">110</option>
<option value="200" selected>200</option>
<option value="300" selected>300</option>
</select>
<a href="https://editor.codecogs.com">https://editor.codecogs.com</a><br><br>
<img id="codecogsimg" src="http://latex.codecogs.com/gif.latex?\frac{d}{dx}\sqrt{x}=" style="border: dashed gray 1px;">
<br><br>
&#x1F517; <a id="link"><a/>
<script defer>
update_fig = () => {
codecogsimg.src = "http://latex.codecogs.com/"+fmt.value+".latex?\\dpi{" + dpi.value + "}" + mf.value
link.innerHTML = link.href = window.location.origin + window.location.pathname + '?' + mf.value
}
window.location.search.slice(1) && mf.setValue(window.location.search.slice(1))
update_fig()
mf.addEventListener('input', update_fig);
</script>
</body>
</html>
@mzechmeister
Copy link
Author

mzechmeister commented Oct 27, 2025

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment