forked from miebach/js-textile
-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
141 lines (101 loc) · 3.13 KB
/
test.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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Textile Test Suite </title>
<style>
body {font-family:Arial,Helvetica,sans-serif;font-size:10pt;}
#preview {border:1px black solid;height:90%;overflow:scroll;}
#tedit {float:left;width:50%;height:90%;}
#textile {width:100%;height:100%;}
#htmlp {border:1px black solid;font-size:8pt;}
#tabs a {display:inline-block;width:80px;border:1px black solid;padding:3px;}
.biggreen {color:green;font-size:1.2em;}
#italic {font-style:italic;}
</style>
<script src='textile/textile.js'></script>
<script>
function do_convert() {
var html = convert_textile(document.getElementById('textile').value);
document.getElementById('preview').innerHTML=html;
html = html.replace(/&/g,"&").replace(/</g,"<");
document.getElementById('htmlp').innerHTML=tag("pre",'',html);
}
</script>
</head>
<body onload="do_convert();">
<form>
<div id='tedit'>
<textarea id="textile" name='txtl' onKeyUp="do_convert()" rows='20' cols='50'>
h1. Header 1
h2)>. Right-aligned padded Header 2
h3()=[no]{color:red}. Red centred Header 3
A single paragraph.
Followed by another.
<p>Some inline <b>bold</b> HTML, inside paragraph tags.</p>
<pre>
A <i>pre</i> Section.
</pre>
"A quoted passage with -- assorted - replaced entities... , including 2 x 2 , (TM), (R) and (C). "
bq. A block quotation.
Finished with a new paragraph.
bq.. a multi-line block quotation.
With a second line
p(biggreen). Finished with a paragraph with a class of 'biggreen'
p(#italic). This has an id of 'italic'
p(biggreen#italic). This is both class 'biggreen' and id 'italic'
p{color:blue;margin:30px}. Some inline styling, using CSS(Cascading Style Sheets).
p[fr]. rouge
This is covered elsewhere[1].
fn1. Down here, in fact.
I _believe_ every word. And then? She *fell*! I __know__. I **really** __know__. ??Cat's Cradle?? by Vonnegut. Convert with @r.to_html@ I'm -sure- not sure. You are a +pleasant+ child. a ^2^ + b ^2^ = c ^2^ log ~2~ x
I'm %unaware% of most soft drinks. I'm %{color:red}unaware% of most soft drinks. I seriously *{color:red}blushed* when I _(big)sprouted_ that corn stalk from my %[es]cabeza%.
p<. align left
p>. align right
p=. centered
p<>. justified
p(. left indent 1em
p((. left indent 2em
p))). right indent 3em
# A first item
# A second item
# A third
# Fuel could be:
## Coal
## Gasoline
## Electricity
# Humans need only:
## Water
## Protein
* A first item
* A second item
* A third
* Fuel could be:
** Coal
** Gasoline
** Electricity
* Humans need only:
** Water
** Protein
[google]http://google.com
I searched "Google":google
!>/snoopy.png(Snoopy.)!:http://www.ben-daglish.net
This Snoopy is right-aligned, and a link to boot.
|_. name |_. age |_. Hair colour |
| joan | 24 |{background:#ddd}. Grey |
| archie | 29 |{color:#f00}. Red |
{background:#ff0}. | bella | 45 | Black |
table{border:1px solid black;margin-top:20px}.
|_.\2. attribute list, spanning 2 cols |
|<. align left |>. align right|
|=. center |<>. justify |
|^. valign top |~. bottom |
|/3. spans 3 rows | a |
| b |
| c |
</textarea>
</div>
</form>
<div id='preview'></div>
<div id='htmlp'></div>
</body>
</html>