MathQuill Demo local test page

Math textbox with initial LaTeX: \frac{d}{dx}\sqrt{x}=

Try typing 1/2\sqrt x and using the arrow keys to move around. Shortcut: use the tab key instead of arrow keys to get "out" of a command, like a_n[tab]x^n. Many LaTeX-style symbols and commands preceded by a backslash are supported, such as \forall or n\choose k.

Latex source:

Render LaTeX as an image with Code Cogs Link

Show Semantically Meaningful HTML Source

You could actually just copy-and-paste this HTML into any element with class="mq-math-mode" on a page that includes the mathquill.css and it would render beautifully, like this:

Any element with class="mathquill-static-math" whose contents are LaTeX source will be rendered as static math: e^{i\pi}+1=0. Note that if you're only rendering static math, MathJax supports more of LaTeX and renders better.

In many applications, such as a chat client, you probably type mostly normal text with some math interspersed, so there is also a MathQuill textbox that let's you type math between $'s: The Quadratic Equation is $x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$

LaTeX math can also have textboxes inside: \int\MathQuillMathField{}dx or even \sqrt{\MathQuillMathField{x^2+y^2}}

This button runs the JavaScript code written on it to MathQuill-ify the following <span> element into an editable math textbox: MQ.MathField(this.nextSibling)\frac{d}{dx}\sqrt{x} = \frac{d}{dx}x^{\frac{1}{2}} = \frac{1}{2}x^{-\frac{1}{2}} = \frac{1}{2\sqrt{x}}