RedmineTextFormattingTextile » History » Revision 10
Revision 9 (Go MAEDA, 2018-01-13 16:18) → Revision 10/14 (Charles Sun, 2018-06-08 04:50)
h1. Textile formatting
Below is *Textile* formatting. For *Markdown* formatting see [[RedmineTextFormattingMarkdown]].
For limitations of current Textile support see #6269, #10078 (Definition Lists).
{{>TOC}}
h2. Links
h3. Redmine links
{{include(RedmineTextFormattingRedmineLinks)}}
h3. External links
URLs (http, https, ftp and ftps) are automatically turned into clickable links:
* *http://www.redmine.org* -- External link to the redmine website: http://www.redmine.org
URLs can also use different text than the link itself:
* *"Redmine web site":http://www.redmine.org* -- External link with different text: "Redmine web site":http://www.redmine.org
* *!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:
p=. !http://www.redmine.org/attachments/7069/Redmine_logo.png(Redmine web site)!:http://www.redmine.org
File URI can be used to link UNC path:
* *"\\server\share$":file://///server/share%24* -- File URI showing UNC path: "\\server\share$":file://///server/share%24
You should "URL Encodings":http://www.w3schools.com/tags/ref_urlencode.asp for special characters like empty space, $, á, é, í, ó, ú, etc.
h3. Email addresses
Email addresses are automatically turned into clickable links:
* *someone@foo.bar* -- Link to an email address: someone@foo.bar
* *"Email someone":mailto:someone@foo.bar* -- Email link with different text: "Email someone":mailto:someone@foo.bar
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.
* *"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
* *"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
* *"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 "Email someone for help":mailto:someone@foo.bar?subject=Website%20Help&body=My%20problem%20is%20
h2. Text formatting
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.
h3. Acronym
<pre>
JPL(Jean-Philippe Lang)
</pre>
displays:
JPL(Jean-Philippe Lang)
h3. Font style
<pre><code>* *bold*
* _italic_
* *_bold italic_*
* +underline+
* -strike-through-
* Plain ^superscript^
* Plain ~subscript~
* @inline monospace@
* <notextile>normal *bold* _italic_ normal;E=mc ^2^</notextile>
* <notextile>normal<notextile></notextile>*bold*<notextile></notextile>_italic_<notextile></notextile>normal;E=mc<notextile></notextile>^2^</notextile>
* <notextile>Escaping: <notextile>*bold* _italic_ @inlinemono@</notextile> Alternative using HTML-codes: *bold* _italic_ @inlinemono@</notextile>
* <notextile><pre>*some lines* some "link":http://www.redmine.org</pre></notextile>
* <notextile><pre><notextile></notextile>*some lines* some "link":http://www.redmine.org</pre></notextile>
</code></pre>
displays:
* *bold*
* _italic_
* *_bold italic_*
* +underline+
* -strike-through-
* Plain ^superscript^
* Plain ~subscript~
* @inline monospace@
* normal *bold* _italic_ normal;E=mc ^2^
* normal<notextile></notextile>*bold*<notextile></notextile>_italic_<notextile></notextile>normal;E=mc<notextile></notextile>^2^
* Escaping: <notextile>*bold* _italic_ @inlinemono@</notextile> Alternative using HTML-codes: *bold* _italic_ @inlinemono@
* <pre>*some lines* some "link":http://www.redmine.org</pre>
* <pre><notextile></notextile>*some lines* some "link":http://www.redmine.org</pre>
h3. Color
<pre><code><notextile>* %{color:red}red% %{color:green}green% %{color:yellow}yellow% %{color:#82B6E1}blue'ish%
* %{color:red}red%<notextile></notextile>%{color:green}green%<notextile></notextile>%{color:yellow}yellow%<notextile></notextile>%{color:#82B6E1}blue'ish%
* %{background:lightgreen}Lightgreen Background% %{background:yellow}Yellow Background%
* %{background:lightgreen}Lightgreen Background%<notextile></notextile>%{background:yellow}Yellow Background%
</notextile></code></pre>
displays:
* %{color:red}red% %{color:green}green% %{color:yellow}yellow% %{color:#82B6E1}blue'ish%
* %{color:red}red%<notextile></notextile>%{color:green}green%<notextile></notextile>%{color:yellow}yellow%<notextile></notextile>%{color:#82B6E1}blue'ish%
* %{background:lightgreen}Lightgreen Background% %{background:yellow}Yellow Background%
* %{background:lightgreen}Lightgreen Background%<notextile></notextile>%{background:yellow}Yellow Background%
h3. Inline images
* *!image_url!* displays an image located at image_url (textile syntax)
* *!>image_url!* right floating image
* *!image_url(Image title)!* displays an image with an alt/title attribute
* *!image_url!:URL* displays an image located at image_url with link URL added
If you have an image attached to your wiki page, it can be displayed inline using its filename: *!attached_image.png!*
You can also apply a CSS style to the image in the same ways as styling SPANs. The code *!{width: 100%}attached_image.png!* will make the image adjusts to the parent's width.
h3. Headings
<pre><code>h1. Heading
h2. Subheading
h3. Subheading
</code></pre>
Redmine assigns an anchor to each of those headings thus you can link to them with "#Heading", "#Subheading" and so forth.
h3. Paragraphs
<pre><code>p. left aligned
p(. left ident 1em
p((. left ident 2em
as well as for following lines
p>. right aligned
p)))>. right ident 3em
p=. This is centered paragraph.
</code></pre>
displays;
p. left aligned
p(. left ident 1em
p((. left ident 2em
as well as for following lines
p>. right aligned
p)))>. right ident 3em
p=. This is centered paragraph.
h3. Horizontal rule
@----@
displays:
----
h3. Preformatted Text
<pre> <pre>*Your text won't become bold*</pre> </pre>
displays:
<pre> *Your text won't become bold* </pre>
h3. Blockquotes
Start the paragraph with *bq.*:
<pre><code>bq. Rails is a full-stack framework for developing database-backed web applications according to the Model-View-Control pattern.
To go live, all you need to add is a database and a web server.
</code></pre>
displays:
bq. Rails is a full-stack framework for developing database-backed web applications according to the Model-View-Control pattern.
To go live, all you need to add is a database and a web server.
You can also use > at the beginning of each line and stack them for nested quotes:
<pre>
>> Rails is a full-stack framework for developing database-backed web applications according to the Model-View-Control pattern.
>> To go live, all you need to add is a database and a web server.
> Great!
</pre>
displays:
>> Rails is a full-stack framework for developing database-backed web applications according to the Model-View-Control pattern.
>> To go live, all you need to add is a database and a web server.
> Great!
h3. Unordered lists
<pre>
* Item 1
* Item 2
** Item 21
** Item 22
* Item 3
</pre>
displays:
* Item 1
* Item 2
** Item 21
** Item 22
* Item 3
h3. Ordered lists
<pre>
# Item 1
# Item 2
# Item 3
## Item 3.1
## Item 3.2
</pre>
displays:
# Item 1
# Item 2
# Item 3
## Item 3.1
## Item 3.2
h3. Tables
<pre>
|_.UserID |_.Name |_.Group |_. attribute list |
|Starting with | a | simple |row |
|\3=.IT |<. align left |
|1 |Artur Pirozhkov |/2.Users |>. align right |
|2 |Vasya Rogov |=. center |
|3 |John Smith |Admin
(root) |^. valign top |
|4 |- |Nobody
(anonymous) |~. valign bottom |
</pre>
displays (all multiple spaces are replaced by 1 space):
|_.UserID |_.Name |_.Group |_. attribute list |
|Starting with | a | simple |row |
|\3=.IT |<. align left |
|1 |Artur Pirozhkov |/2.Users |>. align right |
|2 |Vasya Rogov |=. center |
|3 |John Smith |Admin
(root) |^. valign top |
|4 |- |Nobody
(anonymous) |~. valign bottom |
If you want to include pipe characters inside your table (e.g. for Wiki links), you need to prevent textile from interpreting them:
|_.Input |_. Output|
|*<notextile><notextile>|</notextile></notextile>*|<notextile>|</notextile>|
If you want to specify the width of the table, you need to put *table{width:100%}.* just before your table definition:
<pre>
table{width:100%}.
| This table will use
all horizontal space |
</pre>
This way the table will extend to the whole page width ...
table{width:100%}.
| This table will use
all horizontal space |
... compared with the standard width:
| This table will use
only the required space |
h3. Table of content
<pre><code>{{toc}} => left aligned toc
{{>toc}} => right aligned toc
</code></pre>
Please keep in mind, that the toc-tag needs an empty line above and underneath it and no other text before and after it.
Example:
<pre><code>
h1. headLineOne
h2. something
{{toc}}
h2. something more
</code></pre>
h2. Macros
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:
{{macro_list}}
h2. Code highlighting
Code highlighting relies on "CodeRay":http://coderay.rubychan.de/, a fast syntax highlighting library written completely in Ruby. It currently supports C, C++, CSS, Delphi, Diff, Groovy, HTML, Java, Javascript, JSON, Nitro-XHTML, PHP, Python, RHTML, Ruby, Scheme, SQL, XML and YAML code.
You can highlight code in your wiki page using this syntax:
<pre><code><pre><code class="ruby">
Place your code here.
</code></pre>
</code></pre>
Example:
<pre><code class="ruby">
# The Greeter class
class Greeter
def initialize(name)
@name = name.capitalize
end
def salute
puts "Hello #{@name}!"
end
end
</code></pre>
h2. Styling text using CSS
Textile can style text using CSS. Examples as follows:
<pre>
Three primary colors of light are %{color: #f00}red%, %{color: #0f0}green% and %{color: #00f}blue%.
p{border: solid 1px #000; padding: 0.5em;}. The quick brown fox jumps over the lazy dog.
table{width: 100%}.
|={width: 30%; background-color: #aaf;}. column 1 |={width: 70%}. column 2 |
</pre>
displays:
Three primary colors of light are %{color: #f00}red%, %{color: #0f0}green% and %{color: #00f}blue%.
p{border: solid 1px #000; padding: 0.5em;}. The quick brown fox jumps over the lazy dog.
table{width: 100%}.
|={width: 30%; background-color: #aaf;}. column 1 |={width: 70%}. column 2 |
h3. Allowed CSS properties
Redmine allows the following properties. Other properties are not allowed for security reasons (see r2192).
* background
* background-*
* border
* border-*
* color
* float
* font
* font-*
* height
* margin
* margin-*
* max-height
* max-width
* min-height
* min-width
* padding
* padding-*
* text
* text-*
* width
h2. Translation
Note that the following translations may not be up to date. Please refer to the original english documentation if needed.
* [[BrRedmineWikiFormatting|Português Brasileiro]]
* [[RusRedmineTextFormatting|Русский]]
* [[FrRedmineWikiFormatting|French]]
* [[KoreanWikiFormatting|Korean]]
* [[TurkishWikiFormatting|Türkçe]]
* [[TraditionalChineseWikiFormatting|繁體中文]]
* [[SimplifiedChineseWikiFormatting|简体中文]]