scripts/CodeMirror/mode/textile/index.html (view raw)
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"><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">
28h1. Textile Mode
29
30A paragraph without formatting.
31
32p. A simple Paragraph.
33
34
35h2. Phrase Modifiers
36
37Here are some simple phrase modifiers: *strong*, _emphasis_, **bold**, and __italic__.
38
39A ??citation??, -deleted text-, +inserted text+, some ^superscript^, and some ~subscript~.
40
41A %span element% and @code element@
42
43A "link":http://example.com, a "link with (alt text)":urlAlias
44
45[urlAlias]http://example.com/
46
47An image: !http://example.com/image.png! and an image with a link: !http://example.com/image.png!:http://example.com
48
49A sentence with a footnote.[123]
50
51fn123. The footnote is defined here.
52
53Registered(r), Trademark(tm), and Copyright(c)
54
55
56h2. Headers
57
58h1. Top level
59h2. Second level
60h3. Third level
61h4. Fourth level
62h5. Fifth level
63h6. Lowest level
64
65
66h2. 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
88h2. Attributes
89
90Layouts and phrase modifiers can be modified with various kinds of attributes: alignment, CSS ID, CSS class names, language, padding, and CSS styles.
91
92h3. Alignment
93
94div<. left align
95div>. right align
96
97h3. CSS ID and class name
98
99You are a %(my-id#my-classname) rad% person.
100
101h3. Language
102
103p[en_CA]. Strange weather, eh?
104
105h3. Horizontal Padding
106
107p(())). 2em left padding, 3em right padding
108
109h3. CSS styling
110
111p{background: red}. Fire!
112
113
114h2. 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
124h3. A table with attributes:
125
126table(#prices).
127|Adults|$5|
128|Children|$2|
129
130
131h2. Code blocks
132
133bc.
134function factorial(n) {
135 if (n === 0) {
136 return 1;
137 }
138 return n * factorial(n - 1);
139}
140
141pre..
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
163h2. Temporarily disabling textile markup
164
165notextile. Don't __touch this!__
166
167Surround text with double-equals to disable textile inline. Example: Use ==*asterisks*== for *strong* text.
168
169
170h2. HTML
171
172Some 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>