Beruflich Dokumente
Kultur Dokumente
http://redcloth.org/hobix.com/textile/ 1/15
This is a cache of http://hobix.com/textile/. It is a snapshot of the page as it appeared on Aug 17, 2009 08:41:04 GMT
but with some links fixed. Learn more about the disappearance of hobix.com
A Textile Reference
Sections: Writing in Textile | Quick Block Modifiers | Quick Phrase Modifiers | Attributes | Lists |
External References | Tables
Textile is a simple text markup. Simple symbols mark words emphasis. Blocks of text can be easily tagged
as headers, quotes, or lists. A Textile document can then be converted to HTML for viewing on the web.
You can try Textile out on the Textile home page. Textile is also available as RedCloth for Ruby or
PyTextile for Python.
Also refer to the Quick Reference for this guide.
Reading the Examples
In each section below, examples are provided to clearly illustrate. In each example, the Textile example is
followed by the raw HTML it is translated into, followed by how the HTML appears in the browser.
Textile example Conv erted to HTML
Browser-view
1.
Writing in Textile
Textile looks for paragraphs in your text. Paragraphs are separated by one blank line. Every paragraph is
translated as an HTML paragraph.
A single paragraph.
Followed by another.
<p>A single paragraph.</p>
<p>Followed by another.</p>
A single paragraph.
Followed by another.
Using HTML in Textile
You can certainly use HTML tags inside your Textile documents. HTML will only be escaped if its found
in a pre or code block.
I am <b>very</b> serious.
<pre>
I am <b>very</b> serious.
</pre>
<pre>
<code>
a.gsub!( /</, '' )
</code>
</pre>
a.gsub!( /</, '' )
You may also choose to surround sections with div tags to separate your document into sections. Instiki
uses this technique to float a sidebar to the right.
<div style="float:right;">
h3. Sidebar
"Hobix":http://hobix.com/
"Ruby":http://ruby-lang.org/
</div>
The main text of the
page goes here and will
stay to the left of the
sidebar.
<p><img
src="http://redcloth.org/hobix.com/textile/sample.jpg"
alt="" /></p>
5/13/2014 Textile Reference
http://redcloth.org/hobix.com/textile/ 11/15
URLs may be relative.
A title for the image can also be provided in parens, just before the closing exclamation.
!openwindow1.gif(Bunny.)!
<p><img src="openwindow1 .gif" title="Bunny ."
alt="Bunny ." /></p>
The title also acts as alt text should the image not be found.
Links can be attached to images with a colon.
!openwindow1.gif!:http://hobix.com/
<p><a href="http://hobix.com/"><img
src="openwindow1 .gif" alt="" /></a></p>
5/13/2014 Textile Reference
http://redcloth.org/hobix.com/textile/ 12/15
Image Alignments
Alignments can be applied as well to images.
!>obake.gif!
And others sat all round the small
machine and paid it to sing to them.
<p sty le="float:right"><img src="obake.gif" alt="" />
</p>
<p>And others sat all round the small
machine and paid it to sing to them.</p>
And others sat all round
the small machine and
paid it to sing to them.
Acronyms
Definitions for acronyms can be provided by following an acronym with its definition in parens.
We use CSS(Cascading Style Sheets).
<p>We use <acrony m title="Cascading Sty le
Sheets">CSS</acrony m>.</p>
We use CSS.
7.
Tables
Simple tables can be built by separating fields with pipe characters
| name | age | sex |
| joan | 24 | f |
| archie | 29 | m |
| bella | 45 | f |
<table>
<tr>
<td> name </td>
<td> age </td>
<td> sex </td>
</tr>
<tr>
<td> joan </td>
<td> 24 </td>
<td> f </td>
</tr>
<tr>
<td> archie </td>
<td> 29 </td>
<td> m </td>
</tr>
<tr>
<td> bella </td>
<td> 45 </td>
<td> f </td>
</tr>
</table>
name age sex
joan 24 f
archie 29 m
bella 45 f
Specify header cells by marking them with an underscore and period.
5/13/2014 Textile Reference
http://redcloth.org/hobix.com/textile/ 13/15
|_. name |_. age |_. sex |
| joan | 24 | f |
| archie | 29 | m |
| bella | 45 | f |
<table>
<tr>
<th>name </th>
<th>age </th>
<th>sex </th>
</tr>
<tr>
<td> joan </td>
<td> 24 </td>
<td> f </td>
</tr>
<tr>
<td> archie </td>
<td> 29 </td>
<td> m </td>
</tr>
<tr>
<td> bella </td>
<td> 45 </td>
<td> f </td>
</tr>
</table>
nameagesex
joan 24 f
archie 29 m
bella 45 f
Cell Attributes
The period used above marks the end of a cells attributes. Other attributes can be applied as well.
|_. attribute list |
|<. align left |
|>. align right|
|=. center |
|<>. justify |
|^. valign top |
|~. bottom |
<table>
<tr>
<th>attribute list </th>
</tr>
<tr>
<td sty le="text-align:left;">align left </td>
</tr>
<tr>
<td sty le="text-align:right;">align right</td>
</tr>
<tr>
<td sty le="text-align:center;">center </td>
</tr>
<tr>
<td sty le="text-align:justify ;">justify </td>
</tr>
<tr>
<td sty le="v ertical-align:top;">v align top </td>
</tr>
<tr>
<td sty le="v ertical-align:bottom;">bottom </td>
</tr>
</table>
attribute list
align left
align right
5/13/2014 Textile Reference
http://redcloth.org/hobix.com/textile/ 14/15
center
justify
valign top
bottom
You can also specify colspans with a backslash, followed by the cell width.
|\2. spans two cols |
| col 1 | col 2 |
<table>
<tr>
<td colspan="2">spans two cols </td>
</tr>
<tr>
<td> col 1 </td>
<td> col 2 </td>
</tr>
</table>
spans two cols
col 1 col 2
Rowspan is specified by a forward slash, followed by the row height.
|/3. spans 3 rows | a |
| b |
| c |
<table>
<tr>
<td rowspan="3">spans 3 rows </td>
<td> a </td>
</tr>
<tr>
<td> b </td>
</tr>
<tr>
<td> c </td>
</tr>
</table>
spans 3 rows
a
b
c
All block attributes can be applied to table cells as well.
|{background:#ddd}. Grey cell|
<table>
<tr>
<td sty le="background:#ddd;">Grey cell</td>
</tr>
</table>
Grey cell
Table and Row Attributes
Table-wide attributes can be applied before the first row of the table. On its own line, followed by a period.
table{border:1px solid black}.
|This|is|a|row|
|This|is|a|row|
<table sty le="border:1 px solid black;">
<tr>
<td>This</td>
<td>is</td>
<td>a</td>
5/13/2014 Textile Reference
http://redcloth.org/hobix.com/textile/ 15/15
<td>row</td>
</tr>
<tr>
<td>This</td>
<td>is</td>
<td>a</td>
<td>row</td>
</tr>
</table>
This is a row
This is a row
Attributes can be applied to a single row by supplying the attribute before the row starts, using a table
modifier and following it by a period.
|This|is|a|row|
{background:#ddd}. |This|is|grey|row|
<table>
<tr>
<td>This</td>
<td>is</td>
<td>a</td>
<td>row</td>
</tr>
<tr sty le="background:#ddd;">
<td>This</td>
<td>is</td>
<td>grey </td>
<td>row</td>
</tr>
</table>
This is a row
This is grey row