Download and Load¶

Download the latest release or build from source.

MathQuill depends on jQuery 1.5.2+, we recommend the Google CDN-hosted copy.

Load MathQuill with something like (order matters):

<link rel="stylesheet" href="/path/to/mathquill.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/path/to/mathquill.js"></script>
<script>
var MQ = MathQuill.getInterface(2);
</script>

Now you can call our API methods on MQ.

Basic Usage¶

MathQuill instances are created from HTML elements. For the full list of constructors and API methods, see API Methods.

Static Math Rendering¶

To statically render a formula, call MQ.StaticMath() on an HTML element:

<p>Solve <span id="problem">ax^2 + bx + c = 0</span>.</p>

<script>
  var problemSpan = document.getElementById('problem');
  MQ.StaticMath(problemSpan);
</script>

Editable Math Fields¶

To create an editable math field, call MQ.MathField() on an HTML element and, optionally, a config options object. The following example features a math field with a handler to check the answer every time an edit may have occurred:

<p><span id="answer">x=</span></p>

<script>
  var answerSpan = document.getElementById('answer');
  var answerMathField = MQ.MathField(answerSpan, {
    handlers: {
      edit: function() {
        var enteredMath = answerMathField.latex(); // Get entered math in LaTeX format
        checkAnswer(enteredMath);
      }
    }
  });
</script>

Get and Set Math¶

To get and set the contents of a math field, use mathField.latex().

Math fields are initialized with the text that was in the span, parsed as LaTeX. This can be updated by calling mathField.latex(latexString). To programmatically type text into a math field, use .typedText(string),

Join the Community¶

(Prefer IRC? We're #mathquill on Freenode.)