Skip to content

Instantly share code, notes, and snippets.

@wbzyl

wbzyl/MathJax-jQuery.html

Forked from hidsh/MathJax-jquery.html
Created May 6, 2012 20:09
Show Gist options
  • Save wbzyl/2624158 to your computer and use it in GitHub Desktop.
Save wbzyl/2624158 to your computer and use it in GitHub Desktop.
Download ZIP
mathjax interactive preview
Raw
MathJax-jQuery.html
<html>
<head>
<meta charset=utf-8>
<title>Live Preview of MathJax Type Setting</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]] } });
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function() {
function makePreview() {
input = $('#input').val().replace(/</g, "&lt;").replace(/>/g, "&gt;");
$('#preview').html("$$" + input + "$$");
MathJax.Hub.Queue(["Typeset", MathJax.Hub, "preview"]);
}
$('textarea').keyup(function() {
makePreview();
});
$('#preview').on('updated', function() {
makePreview();
});
makePreview();
});
</script>
<style>
html {
background-color: #324654;
}
body, textarea {
background-color: white;
width: 900px;
margin: 0 auto;
padding: 1em;
font-size: 22px;
}
textarea {
font-family: DejaVu Sans Mono, monospace;
}
#preview {
margin-top: 1em;
padding: 1em;
background-color: #E3CBAC;
}
</style>
</head>
<body>
<textarea id="input" rows="8">\sin^2x + \cos^2x = 1</textarea>
<div id="preview"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment