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
180
181
182
183
184
185
186
187
188
189
190
191
|
<!doctype html>
<title>CodeMirror: Textile mode</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../../doc/docs.css">
<link rel="stylesheet" href="../../lib/codemirror.css">
<script src="../../lib/codemirror.js"></script>
<script src="textile.js"></script>
<style>.CodeMirror {background: #f8f8f8;}</style>
<div id=nav>
<a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png"></a>
<ul>
<li><a href="../../index.html">Home</a>
<li><a href="../../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a href="../index.html">Language modes</a>
<li><a class="active" href="#">Textile</a>
</ul>
</div>
<article>
<h2>Textile mode</h2>
<form><textarea id="code" name="code">
h1. Textile Mode
A paragraph without formatting.
p. A simple Paragraph.
h2. Phrase Modifiers
Here are some simple phrase modifiers: *strong*, _emphasis_, **bold**, and __italic__.
A ??citation??, -deleted text-, +inserted text+, some ^superscript^, and some ~subscript~.
A %span element% and @code element@
A "link":http://example.com, a "link with (alt text)":urlAlias
[urlAlias]http://example.com/
An image: !http://example.com/image.png! and an image with a link: !http://example.com/image.png!:http://example.com
A sentence with a footnote.[123]
fn123. The footnote is defined here.
Registered(r), Trademark(tm), and Copyright(c)
h2. Headers
h1. Top level
h2. Second level
h3. Third level
h4. Fourth level
h5. Fifth level
h6. Lowest level
h2. Lists
* An unordered list
** foo bar
*** foo bar
**** foo bar
** foo bar
# An ordered list
## foo bar
### foo bar
#### foo bar
## foo bar
- definition list := description
- another item := foo bar
- spanning ines :=
foo bar
foo bar =:
h2. Attributes
Layouts and phrase modifiers can be modified with various kinds of attributes: alignment, CSS ID, CSS class names, language, padding, and CSS styles.
h3. Alignment
div<. left align
div>. right align
h3. CSS ID and class name
You are a %(my-id#my-classname) rad% person.
h3. Language
p[en_CA]. Strange weather, eh?
h3. Horizontal Padding
p(())). 2em left padding, 3em right padding
h3. CSS styling
p{background: red}. Fire!
h2. Table
|_. Header 1 |_. Header 2 |
|{background:#ddd}. Cell with background| Normal |
|\2. Cell spanning 2 columns |
|/2. Cell spanning 2 rows |(cell-class). one |
| two |
|>. Right aligned cell |<. Left aligned cell |
h3. A table with attributes:
table(#prices).
|Adults|$5|
|Children|$2|
h2. Code blocks
bc.
function factorial(n) {
if (n === 0) {
return 1;
}
return n * factorial(n - 1);
}
pre..
,,,,,,
o#'9MMHb':'-,o,
.oH":HH$' "' ' -*R&o,
dMMM*""'`' .oM"HM?.
,MMM' "HLbd< ?&H\
.:MH ."\ ` MM MM&b
. "*H - &MMMMMMMMMH:
. dboo MMMMMMMMMMMM.
. dMMMMMMb *MMMMMMMMMP.
. MMMMMMMP *MMMMMP .
`#MMMMM MM6P ,
' `MMMP" HM*`,
' :MM .- ,
'. `#?.. . ..'
-. . .-
''-.oo,oo.-''
\. _(9>
\==_)
-'=
h2. Temporarily disabling textile markup
notextile. Don't __touch this!__
Surround text with double-equals to disable textile inline. Example: Use ==*asterisks*== for *strong* text.
h2. HTML
Some block layouts are simply textile versions of HTML tags with the same name, like @div@, @pre@, and @p@. HTML tags can also exist on their own line:
<section>
<h1>Title</h1>
<p>Hello!</p>
</section>
</textarea></form>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
mode: "text/x-textile"
});
</script>
<p><strong>MIME types defined:</strong> <code>text/x-textile</code>.</p>
<p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#textile_*">normal</a>, <a href="../../test/index.html#verbose,textile_*">verbose</a>.</p>
</article>
|
