test/basic.html

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=624">

<title>MathQuill-basic Demo</title>

<link rel="stylesheet" type="text/css" href="support/home.css">
<link rel="stylesheet" type="text/css" href="../build/mathquill.css">

</head>
<body>
<div id="body">

<a href="http://github.com/laughinghan/mathquill"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub!"></a>

<h1><a href="http://mathquill.github.com">MathQuill</a>-basic Demo <small>local test page</small></h1>

<p>Backslash <code>\</code> and dollar <code>$</code> aren't special, <code>/</code> still works, font works:

<p><span id="basic">\sqrt{2}</span>

<p><textarea id="basic-latex"></textarea>

</div>
<script type="text/javascript" src="support/jquery-1.7.2.js"></script>
<script type="text/javascript" src="../build/mathquill-basic.js"></script>
<script type="text/javascript">
MQ = MathQuill.getInterface(MathQuill.getInterface.MAX);

var latex = $('#basic-latex').on('keydown keypress', function() {
  var prev = latex.val();
  setTimeout(function() {
    var now = latex.val();
    if (now !== prev) mq.latex(now);
  });
});
var mq = MQ.MathField($('#basic')[0], {
  autoSubscriptNumerals: true,
  handlers: { edit: function() {
    if (!latex.is(':focus')) latex.val(mq.latex());
  } }
});
latex.val(mq.latex());
</script>
</body>
</html>