83 lines
1.8 KiB
HTML
83 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>MathJax Dynamic Math Test Page</title>
|
|
<!-- Copyright (c) 2010 Design Science, Inc. -->
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
|
|
|
|
<script type="text/x-mathjax-config">
|
|
MathJax.Hub.Config({
|
|
extensions: ["tex2jax.js"],
|
|
jax: ["input/TeX","output/HTML-CSS"]
|
|
});
|
|
</script>
|
|
<script type="text/javascript" src="../MathJax.js"></script>
|
|
|
|
<style>
|
|
input {margin-top: .7em}
|
|
.output {
|
|
border: 1px solid black;
|
|
padding: 1em;
|
|
width: auto;
|
|
position: absolute; top: 0; left: 2em;
|
|
min-width: 20em;
|
|
}
|
|
.box {position: relative}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<script>
|
|
//
|
|
// Use a closure to hide the local variables from the
|
|
// global namespace
|
|
//
|
|
(function () {
|
|
var QUEUE = MathJax.Hub.queue; // shorthand for the queue
|
|
var math = null; // the element jax for the math output.
|
|
|
|
//
|
|
// Get the element jax when MathJax has produced it.
|
|
//
|
|
QUEUE.Push(function () {
|
|
math = MathJax.Hub.getAllJax("MathOutput")[0];
|
|
});
|
|
|
|
//
|
|
// The onchange event handler that typesets the
|
|
// math entered by the user
|
|
//
|
|
window.UpdateMath = function (TeX) {
|
|
QUEUE.Push(["Text",math,"\\displaystyle{"+TeX+"}"]);
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<p>
|
|
Type some $\rm\TeX$ code and press RETURN:<br />
|
|
<input id="MathInput" size="80" onchange="UpdateMath(this.value)" />
|
|
</p>
|
|
|
|
<p>You typed:</p>
|
|
<div class="box">
|
|
<div id="MathOutput" class="output">$${}$$</div>
|
|
</div>
|
|
|
|
<script>
|
|
//
|
|
// IE doesn't fire onchange events for RETURN, so
|
|
// use onkeypress to do a blur (and refocus) to
|
|
// force the onchange to occur
|
|
//
|
|
if (MathJax.Hub.Browser.isMSIE) {
|
|
window.MathInput.onkeypress = function () {
|
|
if (window.event && window.event.keyCode === 13) {this.blur(); this.focus()}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|