-
Notifications
You must be signed in to change notification settings - Fork 2
/
demo.html
179 lines (155 loc) · 8.62 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>attempt at CodeMirror + in-place MathJax</title>
<script src="version.js/build/version.js" data-url="cdnjs" data-lib="codemirror" data-ver="5.26.0" data-param="codemirror" data-file="codemirror"></script>
<!-- load render-math.js early to verify its dependencies are at
call time and not load time -->
<script src="render-math.js"></script>
<script src="version.js/build/version.js" data-url="cdnjs" data-lib="codemirror" data-ver="5.26.0" data-param="codemirror" data-file="addon/mode/multiplex"></script>
<script src="version.js/build/version.js" data-url="cdnjs" data-lib="codemirror" data-ver="5.26.0" data-param="codemirror" data-file="mode/stex/stex"></script>
<script src="version.js/build/version.js" data-url="cdnjs" data-lib="codemirror" data-ver="5.26.0" data-param="codemirror" data-file="mode/markdown/markdown"></script>
<script src="version.js/build/version.js" data-type="css" data-url="cdnjs" data-lib="codemirror" data-ver="5.26.0" data-param="codemirror" data-file="codemirror"></script>
<style>
/* Expand editor to fit most of the page. */
html, body, form.editor, textarea, .CodeMirror {
height: 100%; width: 100%;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* TODO: downsizing body is ugly but works better than downsizing form. */
body { height: 80%; width: 95%; }
/* These would make the editor exactly fill the available space,
but also cause CM to auto-resize and never scroll
(instead whole page scrolls), which makes CM slower.
body { display: table; }
form.editor { display: table-row; } */
.CodeMirror { border: 1px solid silver; }
/* Variable-width font to stress test layout. */
.CodeMirror { font-family: serif; }
/* Fallback for CodeMirror < 3.20 that only emits .cm-header. */
.cm-header { font-size: 1.5em; }
/* Match h1..h6 default sizes in WebKit, Mozilla & IE as of 2013. */
/* CM 3.20, 3.21 emitted .cm-header1..6, then changed to .cm-header-1..6. */
.cm-header.cm-header1, .cm-header.cm-header-1 { font-size: 2.00em; }
.cm-header.cm-header2, .cm-header.cm-header-2 { font-size: 1.5em; }
.cm-header.cm-header3, .cm-header.cm-header-3 { font-size: 1.17em; }
.cm-header.cm-header4, .cm-header.cm-header-4 { font-size: 1.00em; }
.cm-header.cm-header5, .cm-header.cm-header-5 { font-size: 0.83em; }
.cm-header.cm-header6, .cm-header.cm-header-6 { font-size: 0.67em; }
/* markdown mode styles `...` and indented code blocks as "comment". */
.cm-comment { font-family: monospace; }
/* exclude math from monospace style to avoid mathjax vertically
squishing formulas, especially display. */
.cm-comment.inline_math, .cm-comment.display_math { font-family: serif; }
.display_math { width:100%; }
.math-typesetting { opacity: 0.7; } /* retain colors but make them weaker */
</style>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true,
/* Previews of all kinds are useless — math is hidden until fully rendered. */
preview: "none"
},
/* "CHTML-preview" is for MathJax 2.5, "fast-preview" is for 2.6. */
"CHTML-preview": { disabled: true },
"fast-preview": { disabled: true },
TeX: { noErrors: { disabled: true },
equationNumbers: { autoNumber: "AMS" },
extensions: ["autoload-all.js"] }
});
</script>
<!-- Safe extension (http://docs.mathjax.org/en/latest/safe-mode.html)
only needed if editor content may be controlled by other users. -->
<script src="version.js/build/version.js" data-ver="2.7.1" data-param="mathjax" data-url="cdnjs" data-lib="mathjax" data-file="MathJax.js" data-suffix="?config=TeX-AMS_HTML-full,Safe"></script>
</head>
<body>
<h1>attempt at CodeMirror + in-place MathJax
[<a href="https://github.com/cben/CodeMirror-MathJax">source on github</a>]
</h1>
<form method="GET" action="">
MathJax version: <select name="mathjax">
<option value="2.3.0">2.3.0</option>
<option value="2.4.0">2.4.0</option>
<option value="2.5.3">2.5.3</option>
<option value="2.6.1">2.6.1</option>
<option value="2.7.1" selected>2.7.1</option>
</select> |
CodeMirror version: <select name="codemirror">
<option value="3.24.0">3.24.0</option>
<option value="4.8.0">4.8.0</option>
<option value="4.13.0">4.13.0</option>
<option value="5.0.0">5.0.0</option>
<option value="5.11.0">5.11.0</option>
<option value="5.26.0" selected>5.26.0</option>
</select>
<input type="submit" value="Load"></input> (for any other versions edit URL params)
</form>
<p><i id="progress">Loading...</i></p>
<form class="editor"><textarea id="code" autofocus>**To edit formulas, move cursor into them with arrow keys.** Clicking with mouse should work but currently doesn't :-(.
# Inline math $a<b>c$
> xXxXxXxXxXxXxXxXxXxXxXxX
Normal-size line with $n = 2$ compact formulas: $x*y$. There was a `*` in that formula but this text should not be italic.
xXxXxXxXxXxXxXxXxXxXxXxX
>> Foo \(\sum^{y}_{z} \frac{1}{x}\) bar.
xXxXxXxXxXxXxXxXxXxXxXxX
## Misc MathJax extensions
AMScd: $ \begin{CD} A @<<< B @>>> C\\ @. @| @AAA\\ @. D @= E \end{CD}$
cancel: $ \cancelto{\cot}{\tan} \frac{A \bcancel{B}}{\bcancel{B} C} $
mhchem: \( \ce{$A$ ->[\ce{+H2O}] $B$} \)
*et cetera...* (No thanks to this library, I simply enabled them in [MathJax config](http://docs.mathjax.org/en/latest/tex.html).)
# Display math
The following `...xXx formula xXx...` are written on one line but the formula is displayed separately.
> xXxXxXxXxXxXxXxXxXxXxXxX $$\sum^b_c \frac{1}{a}$$ xXxXxXxXxXxXxXxXxXxXxXxX
## Maxwell's Equations
\begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}
# Numbering — quite broken
This demo has `autoNumber: "AMS"` in [MathJax config](http://docs.mathjax.org/en/latest/options/TeX.html),
so `\begin{equation}` works at first glance — but it's pretty broken:
$$\sum^b_c \frac{1}{a}$$
> BUG: numbering is unusable, increments with every edit.
This is a forward reference [\ref{ref2}] and another \eqref{ref2} for the following equation:
\begin{equation}x+1\over\sqrt{1-x^2}\label{ref2}\end{equation}
This is a back reference [\ref{ref2}] and another \eqref{ref2} for the preceding equation.
(can also put `[eq]ref` inside math: $\ref{ref2} \Rightarrow \eqref{ref2}$.)
> BUG: labels are completely broken, result in error second time equation is typeset!
\begin{align} x& = y_1-y_2+y_3-y_5+y_8-\dots && \text{by \eqref{ref1}}\\ & = y'\circ y^* && \text{(by \eqref{ref3})}\\ & = y(0) y' && \text {by Axiom 1.} \end{align}
# Defining macros
Define \foo: \newcommand{\foo}{f_0^0}
Use \foo: $\foo$
> BUG: definition changes don't trigger re-typesetting, but it's rare enough that refreshing the page is acceptable workaround.
# In monospace
xXxXxXxXxXxXxXxXxXxXxXxX
>> Foo \(\sum^y_z \frac{1}{x}\) bar.
xXxXxXxXxXxXxXxXxXxXxXxX
$$\sum^b_c \frac{1}{a}$$
xXxXxXxXxXxXxXxXxXxXxXxX
--------------------------------------------------------------------------------
</textarea></form>
<script>
CodeMirror.defineMathMode("markdown+math", {name: "markdown",
underscoresBreakWords: false});
var editor = CodeMirror.fromTextArea(document.getElementById("code"),
{lineNumbers: true,
lineWrapping: true,
mode: "markdown+math"});
var text = editor.getValue(), repeatedText = "";
for(var i = 0; i < 10; i++) {
repeatedText += text;
}
editor.setValue(repeatedText);
editor.refresh();
document.getElementById("progress").innerHTML = "Rendering math..."
var t0 = new Date().getTime();
CodeMirror.hookMath(editor, MathJax);
editor.renderAllMath(function() {
var t1 = new Date().getTime();
var text = "Finished rendering math in " + (t1-t0) + "ms.";
document.getElementById("progress").innerHTML = text;
});
</script>
</body>
</html>