| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <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; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="body"> | |
| <a href="http://github.com/laughinghan/mathquill"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub!"></a> | |
| <h1><a href="http://mathquill.github.com">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 "out" 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="http://mathjax.org">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><span></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> | |
| </div> | |
| <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(); | |
| codecogslink.attr('href','http://latex.codecogs.com/gif.latex?'+latex); | |
| codecogsimg.attr('src','http://latex.codecogs.com/gif.latex?'+latex); | |
| }); | |
| $(function() { | |
| var latexMath = MQ($('#editable-math')[0]); | |
| $(latexMath.el()).bind('keydown keypress', function() { | |
| setTimeout(function() { | |
| var latex = latexMath.latex(); | |
| latexSource.val(latex); | |
| // location.hash = '#'+latex; //extremely performance-crippling in Chrome for some reason | |
| htmlSource.text(printTree(latexMath.html())); | |
| htmlTransplantExample.html(latexMath.html()); | |
| }); | |
| }).keydown(); | |
| latexMath.focus(); | |
| latexSource.bind('keydown keypress', function() { | |
| var oldtext = latexSource.val(); | |
| setTimeout(function() { | |
| var newtext = latexSource.val(); | |
| if(newtext !== oldtext) { | |
| latexMath.latex(newtext); | |
| htmlSource.text(printTree(latexMath.html())); | |
| htmlTransplantExample.html(latexMath.html()); | |
| } | |
| }); | |
| }); | |
| if(location.hash && location.hash.length > 1) | |
| latexMath.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 | |
| tree.push(indent); | |
| indent += ' '; | |
| } | |
| token = token.toLowerCase(); | |
| } | |
| tree.push(token); | |
| } | |
| return tree.join('').slice(1); | |
| } | |
| </script> | |
| </body> | |
| </html> |