|
0
|
1 <!doctype html>
|
|
|
2
|
|
|
3 <title>CodeMirror: Textile mode</title>
|
|
|
4 <meta charset="utf-8"/>
|
|
|
5 <link rel=stylesheet href="../../doc/docs.css">
|
|
|
6
|
|
|
7 <link rel="stylesheet" href="../../lib/codemirror.css">
|
|
|
8 <script src="../../lib/codemirror.js"></script>
|
|
|
9 <script src="textile.js"></script>
|
|
|
10 <style>.CodeMirror {background: #f8f8f8;}</style>
|
|
|
11 <div id=nav>
|
|
|
12 <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png" alt=""></a>
|
|
|
13
|
|
|
14 <ul>
|
|
|
15 <li><a href="../../index.html">Home</a>
|
|
|
16 <li><a href="../../doc/manual.html">Manual</a>
|
|
|
17 <li><a href="https://github.com/marijnh/codemirror">Code</a>
|
|
|
18 </ul>
|
|
|
19 <ul>
|
|
|
20 <li><a href="../index.html">Language modes</a>
|
|
|
21 <li><a class="active" href="#">Textile</a>
|
|
|
22 </ul>
|
|
|
23 </div>
|
|
|
24
|
|
|
25 <article>
|
|
|
26 <h2>Textile mode</h2>
|
|
|
27 <form><textarea id="code" name="code">
|
|
|
28 h1. Textile Mode
|
|
|
29
|
|
|
30 A paragraph without formatting.
|
|
|
31
|
|
|
32 p. A simple Paragraph.
|
|
|
33
|
|
|
34
|
|
|
35 h2. Phrase Modifiers
|
|
|
36
|
|
|
37 Here are some simple phrase modifiers: *strong*, _emphasis_, **bold**, and __italic__.
|
|
|
38
|
|
|
39 A ??citation??, -deleted text-, +inserted text+, some ^superscript^, and some ~subscript~.
|
|
|
40
|
|
|
41 A %span element% and @code element@
|
|
|
42
|
|
|
43 A "link":http://example.com, a "link with (alt text)":urlAlias
|
|
|
44
|
|
|
45 [urlAlias]http://example.com/
|
|
|
46
|
|
|
47 An image: !http://example.com/image.png! and an image with a link: !http://example.com/image.png!:http://example.com
|
|
|
48
|
|
|
49 A sentence with a footnote.[123]
|
|
|
50
|
|
|
51 fn123. The footnote is defined here.
|
|
|
52
|
|
|
53 Registered(r), Trademark(tm), and Copyright(c)
|
|
|
54
|
|
|
55
|
|
|
56 h2. Headers
|
|
|
57
|
|
|
58 h1. Top level
|
|
|
59 h2. Second level
|
|
|
60 h3. Third level
|
|
|
61 h4. Fourth level
|
|
|
62 h5. Fifth level
|
|
|
63 h6. Lowest level
|
|
|
64
|
|
|
65
|
|
|
66 h2. Lists
|
|
|
67
|
|
|
68 * An unordered list
|
|
|
69 ** foo bar
|
|
|
70 *** foo bar
|
|
|
71 **** foo bar
|
|
|
72 ** foo bar
|
|
|
73
|
|
|
74 # An ordered list
|
|
|
75 ## foo bar
|
|
|
76 ### foo bar
|
|
|
77 #### foo bar
|
|
|
78 ## foo bar
|
|
|
79
|
|
|
80 - definition list := description
|
|
|
81 - another item := foo bar
|
|
|
82 - spanning ines :=
|
|
|
83 foo bar
|
|
|
84
|
|
|
85 foo bar =:
|
|
|
86
|
|
|
87
|
|
|
88 h2. Attributes
|
|
|
89
|
|
|
90 Layouts and phrase modifiers can be modified with various kinds of attributes: alignment, CSS ID, CSS class names, language, padding, and CSS styles.
|
|
|
91
|
|
|
92 h3. Alignment
|
|
|
93
|
|
|
94 div<. left align
|
|
|
95 div>. right align
|
|
|
96
|
|
|
97 h3. CSS ID and class name
|
|
|
98
|
|
|
99 You are a %(my-id#my-classname) rad% person.
|
|
|
100
|
|
|
101 h3. Language
|
|
|
102
|
|
|
103 p[en_CA]. Strange weather, eh?
|
|
|
104
|
|
|
105 h3. Horizontal Padding
|
|
|
106
|
|
|
107 p(())). 2em left padding, 3em right padding
|
|
|
108
|
|
|
109 h3. CSS styling
|
|
|
110
|
|
|
111 p{background: red}. Fire!
|
|
|
112
|
|
|
113
|
|
|
114 h2. Table
|
|
|
115
|
|
|
116 |_. Header 1 |_. Header 2 |
|
|
|
117 |{background:#ddd}. Cell with background| Normal |
|
|
|
118 |\2. Cell spanning 2 columns |
|
|
|
119 |/2. Cell spanning 2 rows |(cell-class). one |
|
|
|
120 | two |
|
|
|
121 |>. Right aligned cell |<. Left aligned cell |
|
|
|
122
|
|
|
123
|
|
|
124 h3. A table with attributes:
|
|
|
125
|
|
|
126 table(#prices).
|
|
|
127 |Adults|$5|
|
|
|
128 |Children|$2|
|
|
|
129
|
|
|
130
|
|
|
131 h2. Code blocks
|
|
|
132
|
|
|
133 bc.
|
|
|
134 function factorial(n) {
|
|
|
135 if (n === 0) {
|
|
|
136 return 1;
|
|
|
137 }
|
|
|
138 return n * factorial(n - 1);
|
|
|
139 }
|
|
|
140
|
|
|
141 pre..
|
|
|
142 ,,,,,,
|
|
|
143 o#'9MMHb':'-,o,
|
|
|
144 .oH":HH$' "' ' -*R&o,
|
|
|
145 dMMM*""'`' .oM"HM?.
|
|
|
146 ,MMM' "HLbd< ?&H\
|
|
|
147 .:MH ."\ ` MM MM&b
|
|
|
148 . "*H - &MMMMMMMMMH:
|
|
|
149 . dboo MMMMMMMMMMMM.
|
|
|
150 . dMMMMMMb *MMMMMMMMMP.
|
|
|
151 . MMMMMMMP *MMMMMP .
|
|
|
152 `#MMMMM MM6P ,
|
|
|
153 ' `MMMP" HM*`,
|
|
|
154 ' :MM .- ,
|
|
|
155 '. `#?.. . ..'
|
|
|
156 -. . .-
|
|
|
157 ''-.oo,oo.-''
|
|
|
158
|
|
|
159 \. _(9>
|
|
|
160 \==_)
|
|
|
161 -'=
|
|
|
162
|
|
|
163 h2. Temporarily disabling textile markup
|
|
|
164
|
|
|
165 notextile. Don't __touch this!__
|
|
|
166
|
|
|
167 Surround text with double-equals to disable textile inline. Example: Use ==*asterisks*== for *strong* text.
|
|
|
168
|
|
|
169
|
|
|
170 h2. HTML
|
|
|
171
|
|
|
172 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:
|
|
|
173
|
|
|
174 <section>
|
|
|
175 <h1>Title</h1>
|
|
|
176 <p>Hello!</p>
|
|
|
177 </section>
|
|
|
178
|
|
|
179 </textarea></form>
|
|
|
180 <script>
|
|
|
181 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
|
|
|
182 lineNumbers: true,
|
|
|
183 mode: "text/x-textile"
|
|
|
184 });
|
|
|
185 </script>
|
|
|
186
|
|
|
187 <p><strong>MIME types defined:</strong> <code>text/x-textile</code>.</p>
|
|
|
188
|
|
|
189 <p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#textile_*">normal</a>, <a href="../../test/index.html#verbose,textile_*">verbose</a>.</p>
|
|
|
190
|
|
|
191 </article>
|
