Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 421 lines (356 sloc) 18.186 kb
f697a39 Irakli Gozalishvili Porting wiky to CommonJS package
authored
1 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
2 <head>
3 <title>WikyBox</title>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
5 <script type="text/javascript" src="../teleport/lib/teleport.js"></script>
6 <script type="text/javascript">
7 require.Sandbox({
8 global: window,
9 catalog: { "wiky": { path: "" } }
10 }).main('demo/main')
11 </script>
12 <link rel="stylesheet" type="text/css" href="demo/css/wiky.css"/>
13 <link rel="stylesheet" type="text/css" href="demo/css/wiky.lang.css"/>
14 <link rel="stylesheet" type="text/css" href="demo/css/wiky.math.css"/>
15 <style type="text/css">
16 body {
17 text-align: center;
18 background:snow;
19 }
20 #frame {
21 margin: 0 auto;
22 padding: 0px;
23 text-align: left;
24 width: 60em;
25 border: none;
26 }
27 #content {
28 margin: 0;
29 padding: 0px;
30 width: 40em;
31 border: none;
32 background: #eee;
33 float: left;
34 }
35 #help {
36 margin: 0;
37 padding: 0px;
38 width: 20em;
39 height: 20em;
40 border: none;
41 background: #eee;
42 float: left;
43 }
44 #help h4, #help h5 { color:#226;margin:0.3em 0 0 0;padding:0; }
45
46 #core pre, #style pre, #math pre { font-size:90%;color:#336;margin:0;padding:0 0 0 0.5em;border:none;background:inherit;font-family:monospace;white-space: pre; }
47 #math dfn, #math code { font-size:90%; }
48 #in, #out {
49 margin: 0.3em 0 0 0;
50 padding: 0px;
51 width: 40em;
52 border: none;
53 background: #eee;
54 }
55 #core, #style, #math {
56 margin: 0;
57 padding: 0.5em;
58 width: 19em;
59 border: none;
60 background: #eee;
61 display: none;
62 }
63 #core {
64 display: block;
65 }
66 .tab {
67 height: 20px;
68 margin: 0 auto;
69 padding-left: 10px;
70 }
71 .tab li {
72 margin: 0;
73 padding: 0;
74 display: inline;
75 list-style-type: none;
76 }
77 .tab a:link, .tab a:visited {
78 float: left;
79 background: #ddd;
80 font-size: 100%;
81 line-height: 14px;
82 font-weight: bold;
83 padding: 2px 10px;
84 margin-right: 4px;
85 border: 1px solid #aaa;
86 text-decoration: none;
87 color: #666;
88 }
89 .tab a:link.active, .tab a:visited.active {
90 border-bottom: 1px solid #eee;
91 background: #eee;
92 color: #000;
93 }
94 .tab a:hover {
95 background: #eee;
96 }
97 </style>
98 </head>
99 <body>
100 <h2>WikyBox</h2>
101
102 <div id="frame">
103 <div id="content">
104 <div style="width:100%;background:snow;">
105 <ul id="outmnu" class="tab">
106 <li><a href="javascript:window.output.toggle(0);" class="active">view</a></li>
107 <li><a href="javascript:window.output.toggle(1);">html</a></li>
108 <li><a href="javascript:window.output.toggle(2);">re-wiky</a></li>
109
110 </ul>
111 </div>
112 <div id="out">
113 <div id="outbox" style="width:96%;height:20em;margin:0 auto;overflow:auto;font-size:90%;background:#ddd;border:1px solid black;padding-left:0.5em;"></div>
114 </div>
115 <div id="in">
116 <textarea id="inbox" rows="16" style="width:98%;background:#ffe;border:1px solid black;padding-left:0.5em;margin:0.5em;"></textarea>
117 </div>
118
119 <div style="width:100%;text-align:center;">
120 Insert example text: &nbsp;
121 <button onclick="example('coreexample');">Core</button>
122 <button onclick="example('styleexample');">Style</button>
123 <button onclick="example('mathexample');">Math</button>
124 </div>
125 <!-- <div><i>Note: Opera users must click into the text input box after selecting a new tab in order to update the view box.</i></div> -->
126
127 </div>
128 <div id="help">
129 <div style="width:100%;background:snow;">
130 <ul id="helpmnu" class="tab">
131 <li><a href="javascript:window.helpMenu.toggle(0);" class="active">core</a></li>
132 <li><a href="javascript:window.helpMenu.toggle(1);">style</a></li>
133 <li><a href="javascript:window.helpMenu.toggle(2);">math</a></li>
134
135 </ul>
136 </div>
137 <div id="core">
138 <h5>Header</h5>
139 <pre>==h2==&para;
140 ===h3===&para;</pre>
141 <h5>Paragraphs</h5>
142
143 <pre>separated by an empty line.</pre>
144 <h5>line break</h5>
145 <pre>line\\&para; break.</pre>
146 <h5>blockquote</h5>
147 <pre>["quote"]</pre>
148
149 <pre>[(cite)"quote"]</pre>
150 <pre>[(cite,title)"quote"]</pre>
151 <h5>preformatted block</h5>
152 <pre>[%code block%]</pre>
153 <pre>[(lang)%code block%]</pre>
154 <h5>inline formatting</h5>
155
156 <pre>*<strong>strong</strong>*</pre>
157 <pre>_<em>emphasize</em>_</pre>
158 <pre>^<sup>superscript</sup>^</pre>
159 <pre>~<sub>subscript</sub>~</pre>
160
161 <pre>%<code>code</code>%</pre>
162 <pre>(-<del>deleted</del>-)</pre>
163 <pre>?<abbr title="Abbreviation">abbr</abbr>(Abbreviation)?</pre>
164 <h5>links</h5>
165
166 <pre>http://u.ri</pre>
167 <pre>[http://u.ri, title]</pre>
168 <h5>images <i>(png, gif, jpg)</i></h5>
169 <pre>uri/image.png</pre>
170 <pre>[img:uri/image.png,title]</pre>
171 <h5>definition list</h5>
172
173 <pre>; term: definition</pre>
174 <h5>lists</h5>
175 <pre>* unordered
176 * list
177
178 1. ordered
179 1. list
180
181 1. multi-level
182 1* mixed
183 1*a. list
184 </pre>
185 <h5>tables</h5>
186 <pre>[| *head* |2>columns|
187 | center |left | right|]</pre>
188 <h5>shortcuts</h5>
189
190 <pre>
191 <table style="width:60%;"><tr><td style="text-align:left;"><code>-- --- ...</code> </td><td style="text-align:center;"> </td><td style="text-align:right;"> &#8211; &#8212; &#8230;</td></tr>
192 <tr><td style="text-align:left;"><code>&lt;- -&gt; &lt;-&gt;</code> </td><td style="text-align:center;"> </td><td style="text-align:right;"> &#8592; &#8594; &#8596;</td></tr></table></pre>
193
194 </div>
195 <div id="style">
196 <h5>Styles</h5>
197 <pre>{style}paragraph
198 [{style}(cite, title)"quote"]
199 [{style}(lang)%code block%]
200 [{style}img:uri/image.png]
201 [{style}|table|]
202 </pre>
203 <h5>Style Properties</h5>
204 <pre>{p1;p2;...;pN} or
205 {p1,p2,...,pN}
206 > &#8594; left-indent
207 &lt; &#8594; right-indent
208 >> &#8594; right-align
209
210 &lt;&lt; &#8594; left-align
211 = &#8594; center-align
212 _ &#8594; underline
213 b &#8594; border
214 c:col &#8594; color
215 C:col &#8594; background-color
216 w:width &#8594; width
217
218 any CSS property
219 is allowed.
220 </pre>
221 <h5>Style Examples</h5>
222
223 <pre>{>;c:red;C:#aef}
224 {>>,w:40\%,b}
225 {_,padding:1em}</pre>
226 </div>
227 <div id="math">
228 <h5>Math markup</h5>
229 <pre>Markup similar to LaTex.</pre>
230 <table><tr><td colspan="2" style="text-align:left;"><h5>Block Formula</h5> </td></tr>
231 <tr><td style="text-align:left;"><code>[$y = f(x)$]</code> </td><td style="text-align:left;"><dfn>y = f(x)</dfn> </td></tr>
232
233 <tr><td style="text-align:left;"><code>[(num)$y = e^x$]</code> </td><td style="text-align:left;"><dfn>y = f(x) (num)</dfn> </td></tr>
234 <tr><td colspan="2" style="text-align:left;"><h5>Inline Formula</h5> </td></tr>
235 <tr><td style="text-align:left;"><code>With $y = f(x)$ do</code> </td><td style="text-align:right;"> With <dfn>y = f(x)</dfn> do</td></tr>
236 <tr><td colspan="2" style="text-align:left;"><h5>Overindex, Underindex</h5> </td></tr>
237
238 <tr><td style="text-align:left;"><code>a^2, x_{n-1}, a_{i+1}^{m+n}</code> </td><td style="text-align:right;"> <dfn>a<sup class="i">2</sup>, x<sub class="i"><!--{-->n&#8722;1<!--}--></sub>, a<span class="s"><span class="i"><!--{-->m+n<!--}--></span><span class="i"><!--{-->i+1<!--}--></span></span></dfn></td></tr>
239 <tr><td colspan="2" style="text-align:left;"><h5>Overscript, Underscript</h5> </td></tr>
240 <tr><td style="text-align:left;"><code>\prod^n, \int_{\phi=0}^2\pi, \sum_{i=1}^{n-1}</code> </td><td style="text-align:right;"> <dfn><span class="o"><span class="x">n</span><span class="h">&#8719;</span><span>&nbsp;</span></span>, <span class="o"><span class="x">2&#960;</span><span class="h">&#8747;</span><span class="x"><!--{-->&#966;=0<!--}--></span></span>, <span class="o"><span class="x"><!--{-->n&#8722;1<!--}--></span><span class="h">&#8721;</span><span class="x"><!--{-->i=1<!--}--></span></span></dfn></td></tr>
241
242 <tr><td colspan="2" style="text-align:left;"><h5>Fractions</h5> </td></tr>
243 <tr><td style="text-align:left;"><code>a/b, {a+b}/{c+d}, a//b, a//{b+c}</code> </td><td style="text-align:right;"> <dfn><span class="f"><span class="n">a</span><span class="d">b</span></span>, <span class="f"><span class="n"><!--{-->a+b<!--}--></span><span class="d"><!--{-->c+d<!--}--></span></span>, <sup>a</sup>&#8260;<sub>b</sub>, <sup>a</sup>&#8260;<sub><!--{-->b+c<!--}--></sub></dfn></td></tr>
244
245 <tr><td colspan="2" style="text-align:left;"><h5>Vectors</h5> </td></tr>
246 <tr><td style="text-align:left;"><code>!v = [x,y,z]</code> </td><td style="text-align:right;"> <dfn><span class="b">v</span> = <span class="lb" style="font-size:300%;">&nbsp;</span><span class="v"><span class="e">x</span><span class="e">y</span><span class="e">z</span></span><span class="rb" style="font-size:300%;">&nbsp;</span></dfn></td></tr>
247 <tr><td colspan="2" style="text-align:left;"><h5>Matrices</h5> </td></tr>
248 <tr><td style="text-align:left;"><code>!A = [[a,b,c][d,e,f]]</code> </td><td style="text-align:right;"> <dfn><span class="b">A</span> = <span class="lb" style="font-size:200%;">&nbsp;</span><span class="m"><span class="e">a</span><span class="e">d</span></span>
249
250 <span class="m"><span class="e">b</span><span class="e">e</span></span>
251 <span class="m"><span class="e">c</span><span class="e">f</span></span><span class="rb" style="font-size:200%;">&nbsp;</span></dfn></td></tr>
252 <!-- <tr><td colspan="2" style="text-align:left;"><h5>Spaces</h5> </td></tr>
253 <tr><td style="text-align:left;"><code> (&nbsp;)(&nbsp;&nbsp;)(&nbsp;&nbsp;&nbsp;)(&nbsp;&nbsp;&nbsp;&nbsp;)</code> </td><td style="text-align:right;"> <dfn>( )( )( )( )</dfn></td></tr> --><!-- due to ie6 charset support -->
254 <tr><td colspan="2" style="text-align:left;"><h5>Symbols</h5> </td></tr>
255 <tr><td style="text-align:left;"><code>= -= !=</code> </td><td style="text-align:right;"> <dfn>= &#8801; &#8800;</dfn></td></tr>
256 <tr><td style="text-align:left;"><code>~= ~~ ~</code> </td><td style="text-align:right;"> <dfn>&#8773; &#8776; &#8764;</dfn></td></tr>
257
258 <tr><td><code>&gt; &lt; &gt;= &lt;=</code></td><td style="text-align:right;"> <dfn>&gt; &lt; &#8805; &#8804;</dfn></td></tr>
259 <tr><td><code> * \x +- </code></td><td style="text-align:right;"> <dfn> &#183; &#215; &#177; </dfn></td></tr>
260
261 <tr><td><code>&lt;- -&gt; &lt;-&gt;</code></td><td style="text-align:right;"> <dfn>&#8592; &#8594; &#8596;</dfn></td></tr>
262 <tr><td><code>=&gt; &lt;=&gt; /O /o </code></td><td style="text-align:right;"> <dfn>&#8658; &#8660; &#216; &#248;</dfn></td></tr>
263
264 <tr><td colspan="2" style="text-align:left;"><h5>Miscellaneous Symbols</h5> </td></tr>
265 <tr><td style="text-align:left;"><code>\thetasym \upsih \piv</code> </td><td style="text-align:right;"> <dfn>&#977; &#978; &#982;</dfn></td></tr>
266 <tr><td style="text-align:left;"><code>\larr \uarr \rarr \darr</code> </td><td style="text-align:right;"> <dfn>&#8592; &#8593; &#8594; &#8595; </dfn></td></tr>
267
268 <tr><td style="text-align:left;"><code>\harr \crarr \lArr</code> </td><td style="text-align:right;"> <dfn>&#8596; &#8629; &#8656;</dfn></td></tr>
269 <tr><td style="text-align:left;"><code>\uArr \rArr \dArr</code> </td><td style="text-align:right;"> <dfn>&#8657; &#8658; &#8659;</dfn></td></tr>
270 <tr><td style="text-align:left;"><code>\part \exist \hArr \forall</code> </td><td style="text-align:right;"> <dfn>&#8706; &#8707; &#8660; &#8704; </dfn></td></tr>
271
272 <tr><td style="text-align:left;"><code>\empty \nabla \isin</code> </td><td style="text-align:right;"> <dfn>&#8709; &#8711; &#8712; </dfn></td></tr>
273 <tr><td style="text-align:left;"><code>\notin \ni \prod</code> </td><td style="text-align:right;"> <dfn>&#8713; &#8715; <span class="h">&#8719;</span></dfn></td></tr>
274 <tr><td style="text-align:left;"><code>\lowast \radic \sum \minus</code> </td><td style="text-align:right;"> <dfn>&#8727; &#8730; <span class="h">&#8721;</span> &#8722;</dfn></td></tr>
275
276 <tr><td style="text-align:left;"><code>\prop \infin \ang</code> </td><td style="text-align:right;"> <dfn> &#8733; &#8734; &#8736; </dfn></td></tr>
277 <tr><td style="text-align:left;"><code>\and \or \cap \cup</code> </td><td style="text-align:right;"> <dfn>&#8743; &#8744; &#8745; &#8746;</dfn></td></tr>
278 <tr><td style="text-align:left;"><code>\int \there4 \sim \cong</code> </td><td style="text-align:right;"> <dfn><span class="h">&#8747;</span> &#8756; &#8764; &#8773;</dfn></td></tr>
279
280 <tr><td style="text-align:left;"><code>\asymp \ne \equiv</code> </td><td style="text-align:right;"> <dfn>&#8776; &#8800; &#8801; </dfn></td></tr>
281 <tr><td style="text-align:left;"><code>\le \ge \sub</code> </td><td style="text-align:right;"> <dfn>&#8804; &#8805; &#8834;</dfn></td></tr>
282 <tr><td style="text-align:left;"><code>\sup \nsub \sube</code> </td><td style="text-align:right;"> <dfn>&#8835; &#8836; &#8834;e</dfn></td></tr>
283
284 <tr><td style="text-align:left;"><code>\supe \oplus \otimes</code> </td><td style="text-align:right;"> <dfn>&#8835;e &#8853; &#8855;</dfn></td></tr>
285 <tr><td style="text-align:left;"><code>\perp \sdot</code> </td><td style="text-align:right;"> <dfn>&#8869; &#8901;</dfn></td></tr>
286 <tr><td colspan="2" style="text-align:left;"><h5>Greek Letters</h5> </td></tr>
287 <tr><td><code>\Alpha \Beta \Gamma \Delta \Epsilon</code></td><td style="text-align:right;"> <dfn>&#913; &#914; &#915; &#916; &#917;</dfn></td></tr>
288
289 <tr><td><code>\Zeta \Eta \Theta \Iota \Kappa</code></td><td style="text-align:right;"> <dfn>&#918; &#919; &#920; &#921; &#922;</dfn></td></tr>
290 <tr><td><code>\Lambda \Mu \Nu \Xi \Omicron</code></td><td style="text-align:right;"> <dfn>&#923; &#924; &#925; &#926; &#927;</dfn></td></tr>
291 <tr><td><code>\Pi \Rho \Sigma \Tau \Upsilon</code></td><td style="text-align:right;"> <dfn>&#928; &#929; &#931; &#932; &#933;</dfn></td></tr>
292
293 <tr><td><code>\Phi \Chi \Psi \Omega</code></td><td style="text-align:right;"> <dfn>&#934; &#935; &#936; &#937;</dfn></td></tr>
294 <tr><td><code>\alpha \beta \gamma \delta \epsilon</code></td><td style="text-align:right;"> <dfn>&#945; &#946; &#947; &#948; &#949;</dfn></td></tr>
295 <tr><td><code>\zeta \eta \theta \iota \kappa</code></td><td style="text-align:right;"> <dfn>&#950; &#951; &#952; &#953; &#954;</dfn></td></tr>
296
297 <tr><td><code>\lambda \mu \nu \xi \omicron</code></td><td style="text-align:right;"> <dfn>&#955; &#956; &#957; &#958; &#959;</dfn></td></tr>
298 <tr><td><code>\pi \rho \sigmaf \sigma \tau</code></td><td style="text-align:right;"> <dfn>&#960; &#961; &#962; &#963; &#964;</dfn></td></tr>
299 <tr><td><code>\upsilon \phi \chi \psi \omega </code></td><td style="text-align:right;"> <dfn>&#965; &#966; &#967; &#968; &#969;</dfn></td><td>
300
301 </td></tr></table>
302 </div>
303 </div>
304 <!-- invisible -->
305 <pre id="coreexample" style="display:none;">
306 == Example text ==
307 Multiple sentences (-with multiple words-) form a paragraph.\\ Multiple ^sentences^ with ~multiple~ words %form% a paragraph.
308 Avoid \*overlapping \_inline\* code\_.
309
310 The [http://w3.org, W3C] is the [img:house.png, Home] of web standards like ?HTML(Hypertext Markup Language)?.
311
312 [(http://www.brainyquote.com/quotes/authors/a/albert_einstein.html,Albert Einstein)"Any man who can drive safely while kissing a pretty girl is simply not giving the kiss the attention it deserves."]
313
314 [% preformatted Text
315 _ _ _ _ _ _ _
316 ( ) ( ) ( ) ( )/ ) ( ) ( )
317 | |/\| | | | | ( \ ^ /
318 (__/\__) (_) (_)\_) (_)
319 %]
320
321 [(js)%
322 var pi2 = 2*Math.PI, // useful ...
323 greeting = "hello world";
324 function f(x) {
325 return x*x - 2*x + 3;
326 }
327 %]
328
329 * a mixed
330 * multilevel
331 *1. list
332 *1I. with
333 *1I. roman
334 *1Ig. and
335 *1Ig. greek
336 *1. letters
337
338 ; HTML: Hypertext Markup Language
339 ; XML : Extensible Markup language
340
341 [| *First Column* | *Second Column* | *Third Column* |
342 |Table cell content
343
344 in different paragraphs |inline _*formatting*_ and line\\
345 breaks can be used |no list currently in tables |
346 | right adjusted| centered |left adjusted |
347 |2> spann two colums | [%code block%] |]
348 </pre>
349 <pre id="styleexample" style="display:none;">
350 == Example text ==
351 [{>>,c:maroon,C:#abc,w:30\%,b}(http://www.brainyquote.com/quotes/authors/a/albert_einstein.html,Albert Einstein)"Any man who can drive safely while kissing a pretty girl is simply not giving the kiss the attention it deserves."]
352
353 {c:#864}Multiple sentences (-with multiple words-) form a paragraph.\\ Multiple ^sentences^ with ~multiple~ words %form% a paragraph.
354 Avoid \*overlapping \_inline\* code\_.
355
356 The [http://w3.org, W3C] is the [img:house.png, Home] of web standards like ?HTML(Hypertext Markup Language)?.
357
358
359
360 [{C:red}% preformatted Text
361 _ _ _ _ _ _ _
362 ( ) ( ) ( ) ( )/ ) ( ) ( )
363 | |/\| | | | | ( \ ^ /
364 (__/\__) (_) (_)\_) (_)
365 %]
366
367 [{>>,b,C:#bcd,overflow:auto}(js)%
368 var pi2 = 2*Math.PI, // useful ...
369 greeting = "hello world";
370 function f(x) {
371 return x*x - 2*x + 3;
372 }
373 %]
374
375 * a mixed
376 * multilevel
377 *1. list
378 *1I. with
379 *1I. roman
380 *1Ig. and
381 *1Ig. greek
382 *1. letters
383
384 ; HTML: Hypertext Markup Language
385 ; XML : Extensible Markup language
386
387 [{=,w:60\%,b,C:green}| *First Column* | *Second Column* | *Third Column* |
388 |Table cell content
389
390 in different paragraphs |inline _*formatting*_ and line\\
391 breaks can be used |no list currently in tables |
392 | right adjusted| centered |left adjusted |
393 |2> spann two colums | [%code block%] |]
394 </pre>
395
396 <pre id="mathexample" style="display:none;">
397 The equilibrium conditions for body _(2)_ are.
398
399 [(1)$ \sum F_x -= A*cos\phi - B*1/2*\radic2 - 2F = 0$]
400 [(2)$ \sum F_y -= -A*sin\phi + B*1/2*\radic2 - 3/2*F = 0$]
401 [(3)$ \sum M_A -= A*cos\phi * d/2 - B*2d + 2F*4a = 0$]
402
403 The moments of inertia for planar areas ($z = 0$) are
404
405 [$I_x =\int_{A}y^2 dA ; I_y =\int_{A}x^2 dA ; I_xy = -\int_{A}xy dA$]
406
407 [{>>,b,C:#bcd}"[$ax^2 + bx + c = 0$]
408 [$x_{1,2} = {-b +- \radic(b^2 - 4ac)}/{2a}$]"]
409
410 The differential equation of the elastic line with $0 <= x <= a$ is
411
412 [${d^{2}w(x)}/{dx^2} = - {M_y(x)}/{E*I(x)}$]
413
414 Applying the transformation matrix yields
415
416 [$[x',y'] = [[cos\phi,-sin\phi,\Deltax][sin\phi,cos\phi,\Deltay]] \bull [x,y,1]$]
417
418 </pre>
419 </body>
420 </html>
Something went wrong with that request. Please try again.