Skip to content

Instantly share code, notes, and snippets.

@davidrajm

davidrajm/index.html

Created January 13, 2021 10:27
Show Gist options
  • Save davidrajm/a6dc6373bef1ce1bcec69d3fecf2aedf to your computer and use it in GitHub Desktop.
Save davidrajm/a6dc6373bef1ce1bcec69d3fecf2aedf to your computer and use it in GitHub Desktop.
Download ZIP
Complete Code for render Math Dynamically using MathJax
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<title>MathJax</title>
<style>
.container{
max-width: 900px;
margin:0 auto;
font-size: 22px;
}
.preview{
font-family:Arial, Helvetica, sans-serif;
}
textarea{
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<h1>Type LaTeX Code here</h1>
<textarea cols="70" rows="12" id="latex"></textarea>
</div>
<div class="preview-container">
<h2>Preview of the code..</h2>
<div class="preview"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
const content = $('.content')
const preview = $('.preview')
$(content).on('keyup',function(e){
$(preview).html(e.target.value)
MathJax.typeset() // or MathJax.typesetPromise()
})
}
)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment