Download and Load

Download the latest release. MathQuill depends on jQuery 1.4.3+ and we recommend that you use the Google CDN-hosted copy.

Then you can load MathQuill with something like (order matters):

<link rel="stylesheet" href="/path/to/mathquill.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/path/to/mathquill.js"></script>

To use the MathQuill API, load it with:

var MQ = MathQuill.getInterface(2);

All API methods will be called on MQ.

You can also build from the source code.

Basic Usage

MathQuill instances can be created on HTML elements. For the full list of constructors and API methods, see API Methods.

The below examples assume that MathQuill has been properly loaded and exposed as MQ as shown above.

Render Static Math

Call MQ.StaticMath on the 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

To create an editable math field, call MQ.MathField with the HTML element and the config. The following example shows a mathfield created on the answer span with a handler to check the answer every time an edit may occur.

<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() // Retrieve entered math in LaTeX format
        checkAnswer(enteredMath);
      }
    }
  });
</script>

Get and Set Math

The recommended way to retrieve and store the contents of the math field is to call mathField.latex(). mathField.html() can be used to retrieve the contents of the mathField as static HTML.

A mathField will be initialized with the text that was in the span, interpreted as LaTex. This can be updated later by calling mathField.latex(latexString). Content can be added as it would be by someone typing with typedText(string),

Join the Community