-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdemo.html
133 lines (107 loc) · 5.87 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
<head>
<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;
}
</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://assets.github.com/img/4c7dc970b89fd04b81c8e221ba88ff99a06c6b61/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" 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-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 "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="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="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-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><span></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>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></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();
codecogslink.attr('href','http://latex.codecogs.com/gif.latex?'+latex);
codecogsimg.attr('src','http://latex.codecogs.com/gif.latex?'+latex);
});
$(function() {
latexMath.bind('keydown keypress', function() {
setTimeout(function() {
var latex = latexMath.mathquill('latex');
latexSource.val(latex);
// location.hash = '#'+latex; //extremely performance-crippling in Chrome for some reason
htmlSource.text(printTree(latexMath.mathquill('html')));
});
}).keydown().focus();
latexSource.bind('keydown keypress', function() {
var oldtext = latexSource.val();
setTimeout(function() {
var newtext = latexSource.val();
if(newtext !== oldtext) {
latexMath.mathquill('latex', newtext);
htmlSource.text(printTree(latexMath.mathquill('html')));
}
});
});
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
tree.push(indent);
indent += ' ';
}
token = token.toLowerCase();
}
tree.push(token);
}
return tree.join('').slice(1);
}
</script>
</body>
</html>