Project

General

Profile

RedmineTextFormattingTextile » History » Version 19

Csaba Nyéki, 2025-10-30 20:33

1 1 Hans Ginzel
h1. Textile formatting
2
3 3 Hiroo Hayashi
Below is *Textile* formatting. For *Markdown* formatting see [[RedmineTextFormattingMarkdown]].
4
For limitations of current Textile support see #6269, #10078 (Definition Lists).
5 1 Hans Ginzel
6
{{>TOC}}
7
8
h2. Links
9
10
h3. Redmine links
11
12 4 Hiroo Hayashi
{{include(RedmineTextFormattingRedmineLinks)}}
13 1 Hans Ginzel
14
h3. External links
15
16 7 Go MAEDA
URLs (http, https, ftp and ftps) are automatically turned into clickable links: 
17 1 Hans Ginzel
* *http://www.redmine.org* -- External link to the redmine website: http://www.redmine.org
18
19 7 Go MAEDA
URLs can also use different text than the link itself:
20 1 Hans Ginzel
* *"Redmine web site":http://www.redmine.org* -- External link with different text: "Redmine web site":http://www.redmine.org
21
* *!http://www.redmine.org/attachments/7069/Redmine_logo.png(Redmine web site)!:http://www.redmine.org* -- External image with a title that links to an URL: 
22
23
p=. !http://www.redmine.org/attachments/7069/Redmine_logo.png(Redmine web site)!:http://www.redmine.org
24
25 6 Seung Soo Mun
File URI can be used to link UNC path:
26
* *"\\server\share$":file://///server/share%24* -- File URI showing UNC path: "\\server\share$":file://///server/share%24
27
You should "URL Encodings":http://www.w3schools.com/tags/ref_urlencode.asp for special characters like empty space, $, á, é, í, ó, ú, etc.
28
29 1 Hans Ginzel
h3. Email addresses
30
31
Email addresses are automatically turned into clickable links:
32
33 3 Hiroo Hayashi
* *someone@foo.bar* -- Link to an email address: someone@foo.bar
34 1 Hans Ginzel
* *"Email someone":mailto:someone@foo.bar* -- Email link with different text: "Email someone":mailto:someone@foo.bar
35
36
More complex email instructions can be added to an email link.  A default subject, default body and CC information can be defined.  Note that spaces in any of these fields need to be replaced with the code %20.
37
* *"Email webmaster and admin":mailto:webmaster@foo.bar?cc=admin@foo.bar* -- Email to webmaster, CC admin:  "Email webmaster and admin":mailto:webmaster@foo.bar?cc=admin@foo.bar
38
* *"Email someone for help":mailto:someone@foo.bar?subject=Website%20Help* -- Email link with the subject "Website Help": "Email someone for help":mailto:someone@foo.bar?subject=Website%20Help
39 10 Charles Sun
* *"Email someone for help":mailto:someone@foo.bar?subject=Website%20Help&body=My%20problem%20is%20* -- Email link with the subject "Website Help" and a default body: "My problem is ":mailto:someone@foo.bar?subject=Website%20Help&body=My%20problem%20is%20
40 1 Hans Ginzel
41
h2. Text formatting
42
43
For things such as headlines, bold, tables, lists, Redmine supports "Textile syntax":http://en.wikipedia.org/wiki/Textile_%28markup_language%29.  See http://redcloth.org/hobix.com/textile/ for information on using any of these features.  A few samples are included below, but the engine is capable of much more of that.
44
45
h3. Acronym
46
47
<pre>
48
JPL(Jean-Philippe Lang)
49
</pre>
50
51 3 Hiroo Hayashi
displays:
52 1 Hans Ginzel
53
JPL(Jean-Philippe Lang)
54
55
h3. Font style
56
57
<pre><code>* *bold*
58
* _italic_
59
* *_bold italic_*
60
* +underline+
61
* -strike-through-
62
* Plain ^superscript^
63
* Plain ~subscript~
64
* @inline monospace@
65
* <notextile>normal *bold* _italic_ normal;E=mc ^2^</notextile>
66
* <notextile>normal<notextile></notextile>*bold*<notextile></notextile>_italic_<notextile></notextile>normal;E=mc<notextile></notextile>^2^</notextile>
67
* <notextile>Escaping: <notextile>*bold* _italic_ @inlinemono@</notextile> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Alternative using HTML-codes: &#42;bold&#42; &#95;italic&#95; &#64;inlinemono&#64;</notextile>
68
* <notextile><pre>*some lines*      some "link":http://www.redmine.org</pre></notextile>
69
* <notextile><pre><notextile></notextile>*some lines*      some "link":http://www.redmine.org</pre></notextile>
70
</code></pre>
71
72 3 Hiroo Hayashi
displays:
73 1 Hans Ginzel
74
 * *bold*
75
 * _italic_
76
 * *_bold italic_*
77
 * +underline+
78
 * -strike-through-
79
 * Plain ^superscript^
80
 * Plain ~subscript~
81
 * @inline monospace@
82
 * normal *bold* _italic_ normal;E=mc ^2^
83
 * normal<notextile></notextile>*bold*<notextile></notextile>_italic_<notextile></notextile>normal;E=mc<notextile></notextile>^2^
84
 * Escaping: <notextile>*bold* _italic_ @inlinemono@</notextile> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Alternative using HTML-codes: &#42;bold&#42; &#95;italic&#95; &#64;inlinemono&#64;
85
 * <pre>*some lines*      some "link":http://www.redmine.org</pre>
86
 * <pre><notextile></notextile>*some lines*      some "link":http://www.redmine.org</pre>
87
88 3 Hiroo Hayashi
h3. Color
89 1 Hans Ginzel
90
<pre><code><notextile>* %{color:red}red% %{color:green}green% %{color:yellow}yellow% %{color:#82B6E1}blue'ish%
91
* %{color:red}red%<notextile></notextile>%{color:green}green%<notextile></notextile>%{color:yellow}yellow%<notextile></notextile>%{color:#82B6E1}blue'ish%
92
* %{background:lightgreen}Lightgreen Background% %{background:yellow}Yellow Background%
93
* %{background:lightgreen}Lightgreen Background%<notextile></notextile>%{background:yellow}Yellow Background%
94
</notextile></code></pre>
95
96 3 Hiroo Hayashi
displays:
97 1 Hans Ginzel
98
 * %{color:red}red% %{color:green}green% %{color:yellow}yellow% %{color:#82B6E1}blue'ish%
99
 * %{color:red}red%<notextile></notextile>%{color:green}green%<notextile></notextile>%{color:yellow}yellow%<notextile></notextile>%{color:#82B6E1}blue'ish%
100
 * %{background:lightgreen}Lightgreen Background% %{background:yellow}Yellow Background%
101
 * %{background:lightgreen}Lightgreen Background%<notextile></notextile>%{background:yellow}Yellow Background%
102
103
h3. Inline images
104
105
* *&#33;image_url&#33;* displays an image located at image_url (textile syntax)
106
* *&#33;>image_url&#33;* right floating image
107
* *&#33;image_url(Image title)&#33;* displays an image with an alt/title attribute
108
* *&#33;image_url&#33;:URL* displays an image located at image_url with link URL added
109
110
If you have an image attached to your wiki page, it can be displayed inline using its filename: *&#33;attached_image.png&#33;*
111
112
You can also apply a CSS style to the image in the same ways as styling SPANs. The code *&#33;{width: 100%}attached_image.png&#33;* will make the image adjusts to the parent's width.
113
114
h3. Headings
115
116
<pre><code>h1. Heading
117
118
h2. Subheading
119
120
h3. Subheading
121
</code></pre>
122
123
Redmine assigns an anchor to each of those headings thus you can link to them with "#Heading", "#Subheading" and so forth.
124
125
h3. Paragraphs
126
127
<pre><code>p. left aligned
128
129 5 Hiroo Hayashi
p(. left ident 1em
130 1 Hans Ginzel
131 5 Hiroo Hayashi
p((. left ident 2em
132
as well as for following lines
133 1 Hans Ginzel
134 5 Hiroo Hayashi
p>. right aligned
135 1 Hans Ginzel
136 5 Hiroo Hayashi
p)))>. right ident 3em
137 1 Hans Ginzel
138 5 Hiroo Hayashi
p=. This is centered paragraph.
139 1 Hans Ginzel
</code></pre>
140
141 5 Hiroo Hayashi
displays;
142
143
p. left aligned
144
145
p(. left ident 1em
146
147
p((. left ident 2em
148
as well as for following lines
149
150
p>. right aligned
151
152
p)))>. right ident 3em
153
154
p=. This is centered paragraph.
155
156 1 Hans Ginzel
h3. Horizontal rule 
157 3 Hiroo Hayashi
158 1 Hans Ginzel
@----@
159 3 Hiroo Hayashi
160 1 Hans Ginzel
displays:
161
162
----
163
164 5 Hiroo Hayashi
h3. Preformatted Text
165 1 Hans Ginzel
166 5 Hiroo Hayashi
<pre> <pre>*Your text won't become bold*</pre> </pre>
167 1 Hans Ginzel
168 3 Hiroo Hayashi
displays:
169
170 1 Hans Ginzel
<pre> *Your text won't become bold* </pre>
171
172
h3. Blockquotes
173
174
Start the paragraph with *bq.*:
175
176
<pre><code>bq. Rails is a full-stack framework for developing database-backed web applications according to the Model-View-Control pattern.
177
To go live, all you need to add is a database and a web server.
178
</code></pre>
179
180 3 Hiroo Hayashi
displays:
181 1 Hans Ginzel
182
bq. Rails is a full-stack framework for developing database-backed web applications according to the Model-View-Control pattern.
183
To go live, all you need to add is a database and a web server.
184
185
You can also use > at the beginning of each line and stack them for nested quotes:
186
187
<pre>
188
>> Rails is a full-stack framework for developing database-backed web applications according to the Model-View-Control pattern.
189
>> To go live, all you need to add is a database and a web server.
190
> Great!
191
</pre>
192
193 3 Hiroo Hayashi
displays:
194 1 Hans Ginzel
195
>>  Rails is a full-stack framework for developing database-backed web applications according to the Model-View-Control pattern.
196
>>  To go live, all you need to add is a database and a web server.
197
> Great!
198
199
h3. Unordered lists
200
201
<pre>
202
* Item 1
203
* Item 2
204
** Item 21
205
** Item 22
206
* Item 3
207
</pre>
208
209
displays:
210
211
* Item 1
212
* Item 2
213
** Item 21
214
** Item 22
215
* Item 3
216
217
h3. Ordered lists
218
219
<pre>
220
# Item 1
221
# Item 2
222
# Item 3
223
## Item 3.1
224
## Item 3.2
225
</pre>
226
227
displays:
228
229
# Item 1
230
# Item 2
231
# Item 3
232
## Item 3.1
233
## Item 3.2
234
235
h3. Tables
236
237
<pre>
238
|_.UserID      |_.Name          |_.Group     |_. attribute list   |
239
|Starting with | a              |   simple   |row                 |
240
|\3=.IT                                      |<. align left       |
241
|1             |Artur Pirozhkov |/2.Users    |>. align right      |
242
|2             |Vasya Rogov     |=. center   |
243
|3             |John Smith      |Admin
244
                                 (root)      |^. valign top       |
245
|4             |-               |Nobody
246
                                 (anonymous) |~. valign bottom    |
247
</pre>
248
249
displays (all multiple spaces are replaced by 1 space):
250
251
|_.UserID      |_.Name          |_.Group     |_. attribute list   |
252
|Starting with | a              |   simple   |row                 |
253
|\3=.IT                                      |<. align left       |
254
|1             |Artur Pirozhkov |/2.Users    |>. align right      |
255
|2             |Vasya Rogov     |=. center   |
256
|3             |John Smith      |Admin
257
                                 (root)      |^. valign top       |
258
|4             |-               |Nobody
259
                                 (anonymous) |~. valign bottom    |
260
261
If you want to include pipe characters inside your table (e.g. for Wiki links), you need to prevent textile from interpreting them:
262
263
|_.Input |_. Output|
264
|*<notextile><notextile>|</notextile></notextile>*|<notextile>|</notextile>|
265
266 8 David Lukas Müller
If you want to specify the width of the table, you need to put *table{width:100%}.* just before your table definition:
267
268
<pre>
269
table{width:100%}.
270
| This table will use
271
all horizontal space |
272
</pre>
273
274
This way the table will extend to the whole page width ...
275
276
table{width:100%}.
277
| This table will use
278
all horizontal space |
279
280
... compared with the standard width:
281
282
| This table will use
283
only the required space |
284
285 19 Csaba Nyéki
There must be a blank line before the *table* keyword, but after it (up to the table) there must be no blank lines or anything else.
286
287 16 Csaba Nyéki
h4. Special table control sequences
288
289 19 Csaba Nyéki
Nothing can be placed between the cell delimiter pipeline character and the control sequences.
290 16 Csaba Nyéki
The order of the table control sequences is fixed. If two order are equal then the precedence of the sequences is equal.
291
If the table control sequences are used in the wrong order, they will not be interpreted.
292
293
|_.Sequence|_.Ord|_.Function|
294
|_|1|Highlight the contents of the cell|
295
|\n|2|Merge _n_ cells horizontally|
296
|/n|2|Merge _n_ cells vertically|
297
|<|3|Allign text to left|
298
|=|3|Allign text to center|
299
|>|3|Allign text to right|
300
|^|3|Allign text to top|
301 1 Hans Ginzel
|~|3|Allign text to bottom|
302 18 Csaba Nyéki
|<notextile>.</notextile>|4|Control sequence terminator|
303 16 Csaba Nyéki
304 1 Hans Ginzel
h3. Table of content
305
306
<pre><code>{{toc}} => left aligned toc
307
{{>toc}} => right aligned toc
308
</code></pre>
309
310
Please keep in mind, that the toc-tag needs an empty line above and underneath it and no other text before and after it.
311
312
Example:
313
314
<pre><code>
315
h1. headLineOne
316
317
h2. something
318
319
{{toc}}
320
321
h2. something more
322
</code></pre>
323 13 Andrea Ludin
324
h3. Footnotes
325
326
Marker:
327
328
<pre>
329
This is a first word[1] with a footnote.
330
331
This is a second word[2] with a footnote.
332
</pre>
333
334
*Note:* Marker directly attached to word (no space, no dot or any thing else in between). 
335
336
337
Definition:
338
339 1 Hans Ginzel
<pre>
340 14 Andrea Ludin
fn1. Footnote for the first word
341 13 Andrea Ludin
342 14 Andrea Ludin
fn2. Footnote for the second word
343 13 Andrea Ludin
</pre>
344
345
*Note:* Each definition on its own line anywhere within the document. Empty lines between definitions.
346
347
displays:
348
349
This is a first word[1] with a footnote.
350 1 Hans Ginzel
351
This is a second word[2] with a footnote.
352 13 Andrea Ludin
353 14 Andrea Ludin
fn1. Footnote for the first word
354 13 Andrea Ludin
355 14 Andrea Ludin
fn2. Footnote for the second word
356 1 Hans Ginzel
357
h2. Macros
358
359
Redmine includes a macros system that lets you add custom functions to insert dynamic content in formatted text. You can learn about writing your own macros in [[RedmineMacros]]. Redmine also includes a few builtin macros:
360
361
{{macro_list}}
362
363
h2. Code highlighting
364
365 11 Go MAEDA
Default code highlightment relies on "Rouge":http://rouge.jneen.net/, a syntax highlighting library written in pure Ruby. It supports many commonly used languages such as *c*, *cpp* (c++), *csharp* (c#, cs), *css*, *diff* (patch, udiff), *go* (golang), *groovy*, *html*, *java*, *javascript* (js), *kotlin*, *objective_c* (objc), *perl* (pl), *php*, *python* (py), *r*, *ruby* (rb), *sass*, *scala*, *shell* (bash, zsh, ksh, sh), *sql*, *swift*, *xml* and *yaml* (yml) languages, where the names inside parentheses are aliases. Please refer to [[RedmineCodeHighlightingLanguages]] for the full list of supported languages.
366 1 Hans Ginzel
367
You can highlight code in your wiki page using this syntax:
368
369
<pre><code><pre><code class="ruby">
370
  Place your code here.
371
</code></pre>
372
</code></pre>
373
374
Example:
375
376
<pre><code class="ruby">
377
# The Greeter class
378
class Greeter
379
  def initialize(name)
380
    @name = name.capitalize
381
  end
382
 
383
  def salute
384
    puts "Hello #{@name}!"
385
  end
386
end
387
</code></pre>
388
389 9 Go MAEDA
h2. Styling text using CSS
390
391
Textile can style text using CSS. Examples as follows:
392
393
<pre>
394
Three primary colors of light are %{color: #f00}red%, %{color: #0f0}green% and %{color: #00f}blue%.
395
396
p{border: solid 1px #000; padding: 0.5em;}. The quick brown fox jumps over the lazy dog.
397
398
table{width: 100%}.
399
|={width: 30%; background-color: #aaf;}. column 1 |={width: 70%}. column 2 |
400
</pre>
401
402
displays:
403
404
Three primary colors of light are %{color: #f00}red%, %{color: #0f0}green% and %{color: #00f}blue%.
405
406
p{border: solid 1px #000; padding: 0.5em;}. The quick brown fox jumps over the lazy dog.
407
408
table{width: 100%}.
409
|={width: 30%; background-color: #aaf;}. column 1 |={width: 70%}. column 2 |
410
411
h3. Allowed CSS properties
412
413
Redmine allows the following properties. Other properties are not allowed for security reasons (see r2192).
414
415
* background
416
* background-*
417
* border
418
* border-*
419
* color
420
* float
421
* font
422
* font-*
423
* height
424
* margin
425
* margin-*
426
* max-height
427
* max-width
428
* min-height
429
* min-width
430
* padding
431
* padding-*
432
* text
433
* text-*
434
* width
435
436 1 Hans Ginzel
h2. Translation
437
438
Note that the following translations may not be up to date. Please refer to the original english documentation if needed.
439
440
* [[BrRedmineWikiFormatting|Português Brasileiro]]
441
* [[RusRedmineTextFormatting|Русский]]
442
* [[FrRedmineWikiFormatting|French]]
443 15 Joony Kim
* [[KoreanWikiFormatting|한글(Korean)]]
444 1 Hans Ginzel
* [[TurkishWikiFormatting|Türkçe]]
445
* [[TraditionalChineseWikiFormatting|繁體中文]]
446
* [[SimplifiedChineseWikiFormatting|简体中文]]