Skip to content

Instantly share code, notes, and snippets.

@aycabta
Last active August 29, 2015 14:02
Show Gist options
  • Save aycabta/5945c6ec439738789396 to your computer and use it in GitHub Desktop.
Save aycabta/5945c6ec439738789396 to your computer and use it in GitHub Desktop.
Very Simple MathJax Page
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>simple MathJax</title>
<script type="text/x-mathjax-config;executed=true">
MathJax.Hub.Config({
tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }
});
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</style>
</head>
<body>
<!-- jquery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function display() {
var tex = $('#input #tex').val();
$('#output').html('\\['+tex+'\\]');
MathJax.Hub.Queue(['Typeset',MathJax.Hub]);
if (!window.location.origin) {
window.location.origin = window.location.protocol + "//" + window.location.host;
}
var url = window.location.origin + window.location.pathname + (tex.length ? '?' + encodeURIComponent(tex) : '');
$('#link').text(url).attr('href', url);
}
$(function() {
$('#input #tex').on('change keyup', display);
$('#input #size').on('change', function() {
var size = parseFloat($(this).val()) / 5;
$('#output').css('font-size', size + 'em');
display();
});
display();
if (location.search.length) {
$('#input #tex').val(unescape(location.search.slice(1))).change();
}
});
</script>
<div id="input">
<p><textarea id="tex" type="text" rows="10" cols="100"></textarea></p>
<p>Size: <input id="size" type="range" min="1" max="20" value="10"></p>
</div>
<p id="output"></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment