Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
134 lines (107 sloc) 5.86 KB
<!DOCTYPE html>
<meta name="viewport" content="width=624">
<title>MathQuill Demo</title>
<link rel="stylesheet" type="text/css" href="home.css">
<link rel="stylesheet" type="text/css" href="mathquill.css">
<style type="text/css">
code span {
font: 90% Verdana, sans-serif;
#codecogsimg {
vertical-align: middle;
border: none;
.mathquill-textbox {
width: 100%;
#html-source {
display: none;
font-size: 90%;
white-space: pre-wrap;
.mathquill-rendered-math .mathquill-editable {
min-width: 1cm;
<div id="body">
<a href=""><img style="position: absolute; top: 0; right: 0; border: 0;" src="" alt="Fork me on GitHub!"></a>
<h1><a href="">MathQuill</a> Demo <small>local test page</small></h1>
<p>Math textbox with initial LaTeX: <span id="editable-math" class="mathquill-editable">\frac{d}{dx}\sqrt{x}=</span></p>
<p><small>Try typing <code>1/2\sqrt x</code> and using the arrow keys to move around. Shortcut: use the tab key instead of arrow keys to get &quot;out&quot; of a command, like <code>a_n<span>[tab]</span>x^n</code>. Many LaTeX-style symbols and commands preceded by a backslash are supported, such as <code>\forall</code> or <code>n\choose k</code>.</small></p>
<p>Latex source: <textarea id="latex-source" style="width:80%;vertical-align:top"></textarea></p>
<p><button id="codecogs">Render LaTeX as an image with Code Cogs</button> <a id="codecogslink"><img id="codecogsimg" alt="LaTeX rendered as an image"> <span>Link</span></a></p>
<p><a href="javascript:;" id="show-html-source">Show Semantically Meaningful HTML Source</a></p>
<pre id="html-source"></pre>
<p>You could actually just copy-and-paste this HTML into any element with <code>class="mathquill-rendered-math"</code> on a page that includes the <code>mathquill.css</code> and it would render beautifully.</p>
<p>Any element with <code>class="mathquill-embedded-latex"</code> whose contents are LaTeX source will be rendered as static math: <span class="mathquill-embedded-latex">e^{i\pi}+1=0</span>. Note that if you're only rendering static math, <a href="">MathJax</a> supports more of LaTeX and renders better.</p>
<p>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: <span class="mathquill-textbox">The Quadratic Equation is $x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$</span></p>
<p>LaTeX math can also have textboxes inside: <span class="mathquill-embedded-latex">\int\editable{}dx</span> or even <span class="mathquill-embedded-latex">\sqrt{\editable{x^2+y^2}}</span></p>
<p>This button runs the JavaScript code written on it to MathQuill-ify the following <code>&lt;span&gt;</code> element into an editable math textbox: <button onclick="$(this).text('$(this).next().mathquill(\'revert\')').next().mathquill('editable').focus(); var orig = arguments.callee; this.onclick = function(){ $(this).text('$(this).next().mathquill(\'editable\').focus()').next().mathquill('revert'); this.onclick = orig;$};">$(this).next().mathquill('editable').focus()</button>
<span>\frac{d}{dx}\sqrt{x} = \frac{d}{dx}x^{\frac{1}{2}} = \frac{1}{2}x^{-\frac{1}{2}} = \frac{1}{2\sqrt{x}}</span></p>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="build/mathquill.js"></script>
<script type="text/javascript">
$('#show-html-source').toggle(function() {
$(this).html('Hide Semantically Meaningful HTML Source').parent().next().show();
}, function() {
$(this).html('Show Semantically Meaningful HTML Source').parent().next().hide();
var latexMath = $('#editable-math'), latexSource = $('#latex-source'), htmlSource = $('#html-source'), codecogsimg = $('#codecogsimg'), codecogslink = $('#codecogslink');
$('#codecogs').click(function() {
var latex = latexSource.val();
$(function() {
latexMath.bind('keydown keypress', function() {
setTimeout(function() {
var latex = latexMath.mathquill('latex');
// location.hash = '#'+latex; //extremely performance-crippling in Chrome for some reason
latexSource.bind('keydown keypress', function() {
var oldtext = latexSource.val();
setTimeout(function() {
var newtext = latexSource.val();
if(newtext !== oldtext) {
latexMath.mathquill('latex', newtext);
if(location.hash && location.hash.length > 1)
latexMath.mathquill('latex', decodeURIComponent(location.hash.slice(1))).focus();
//print the HTML source as an indented tree. TODO: syntax highlight
function printTree(html) {
html = html.match(/<[a-z]+|<\/[a-z]+>|./ig);
if (!html) return '';
var indent = '\n', tree = [];
for (var i = 0; i < html.length; i += 1) {
var token = html[i];
if (token.charAt(0) === '<') {
if (token.charAt(1) === '/') { //dedent on close tag
indent = indent.slice(0,-2);
if (html[i+1] && html[i+1].slice(0,2) === '</') //but maintain indent for close tags that come after other close tags
token += indent.slice(0,-2);
else { //indent on open tag
indent += ' ';
token = token.toLowerCase();
return tree.join('').slice(1);
Something went wrong with that request. Please try again.