blob: 251d2e95b907e75eb8de784b3f8a49b3bf76bba2 [file] [log] [blame]
<!DOCTYPE html>
<meta name="viewport" content="width=624">
<title>MathQuill Demo</title>
<link rel="stylesheet" type="text/css" href="support/home.css">
<link rel="stylesheet" type="text/css" href="../build/mathquill.css">
<style type="text/css">
code span {
font: 90% Verdana, sans-serif;
#codecogsimg {
vertical-align: middle;
border: none;
.mathquill-text-field {
width: 100%;
#html-source {
display: none;
font-size: 90%;
white-space: pre-wrap;
.mq-math-mode .mq-editable-field {
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-math-field">\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="mq-math-mode"</code> on a page that includes the <code>mathquill.css</code> and it would render beautifully, like this: <span class="mq-math-mode" id="html-transplant-example"></span></p>
<p>Any element with <code>class="mathquill-static-math"</code> whose contents are LaTeX source will be rendered as static math: <span class="mathquill-static-math">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-text-field">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-static-math">\int\MathQuillMathField{}dx</span> or even <span class="mathquill-static-math">\sqrt{\MathQuillMathField{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('MQ(this.nextSibling).revert()'); MQ.MathField(this.nextSibling); var orig = arguments.callee; this.onclick = function(){ $(this).text('MQ.MathField(this.nextSibling)'); MQ(this.nextSibling).revert(); this.onclick = orig; };">MQ.MathField(this.nextSibling)</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="support/jquery-1.7.2.js"></script>
<script type="text/javascript" src="../build/mathquill.js"></script>
<script type="text/javascript">
MQ = MathQuill.getInterface(MathQuill.getInterface.MAX);
//on document ready, mathquill-ify all `<tag class="mathquill-*">latex</tag>`
//elements according to their CSS class.
$(function() {
$('.mathquill-static-math').each(function() { MQ.StaticMath(this); });
$('.mathquill-math-field').each(function() { MQ.MathField(this); });
$('.mathquill-text-field').each(function() { MQ.TextField(this); });
$('#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'), htmlTransplantExample = $('#html-transplant-example');
$('#codecogs').click(function() {
var latex = latexSource.val();
$(function() {
var latexMath = MQ($('#editable-math')[0]);
$(latexMath.el()).bind('keydown keypress', function() {
setTimeout(function() {
var latex = latexMath.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) {
if(location.hash && location.hash.length > 1)
//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);