Headings
Headings convey a hierarchy of information on the page. They structure the document like an outline. Heading 1 is the most important or general and Heading 6 is the least important or most specific. Leave a blank line after every heading.
Textile
h1. This is a Heading 1
This might be an introductory paragraph on the general topic.
h2. Heading 2 gets more specific
Now we're getting into the details.Browser
This is a Heading 1
This might be an introductory paragraph on the general topic.
Heading 2 gets more specific
Now we’re getting into the details.
HTML
<h1>This is a Heading 1</h1>
<p>This might be an introductory paragraph on the general topic.</p>
<h2>Heading 2 gets more specific</h2>
<p>Now we’re getting into the details.</p>Block quotations
Block quotations designate long quotations where a paragraph break is appropriate. It ends with a blank line.
Textile
Even Mr. Sedaris, a noted luddite, has finally succumbed to doing his writing on a computer. The Internet, however, remains an idiotic trifle:
bq. I've never seen the Internet. I don't have email. I just enjoy lying on the couch and reading a magazine. When people say, "You should visit my Web page," I'm always perplexed by it. Why? What do you do there?
Haven't we all pondered that at one time or another?Browser
Even Mr. Sedaris, a noted luddite, has finally succumbed to doing his writing on a computer. The Internet, however, remains an idiotic trifle:
I’ve never seen the Internet. I don’t have email. I just enjoy lying on the couch and reading a magazine. When people say, “You should visit my Web page,” I’m always perplexed by it. Why? What do you do there?
Haven’t we all pondered that at one time or another?
HTML
<p>
Even Mr. Sedaris, a noted luddite, has finally succumbed to doing his writing
on a computer. The Internet, however, remains an idiotic trifle:
</p>
<blockquote>
<p>
I’ve never seen the Internet. I don’t have email. I just enjoy
lying on the couch and reading a magazine. When people say, “You
should visit my Web page,” I’m always perplexed by it. Why? What
do you do there?
</p>
</blockquote>
<p>Haven’t we all pondered that at one time or another?</p>Block quotations may include a citation URL immediately following the period.
Textile
A standard Lorem Ipsum passage has been used since the 1500s:
bq.:http://www.lipsum.com/ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Browser
A standard Lorem Ipsum passage has been used since the 1500s:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
HTML
<p>A standard Lorem Ipsum passage has been used since the 1500s:</p>
<blockquote cite="http://www.lipsum.com/">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</blockquote>If your block quotation needs to go on for more than one paragraph, use two periods. The block quotation ends when a paragraph of a different type (such as an explicit paragraph or a header) is encountered.
Textile
bq.. This is one paragraph.
Another paragraph, also part of the quote.
p. A normal paragraph ends the quote.Browser
This is one paragraph.
Another paragraph, also part of the quote.
A normal paragraph ends the quote.
HTML
<blockquote>
<p>This is one paragraph.</p>
<p>Another paragraph, also part of the quote.</p>
</blockquote>
<p>A normal paragraph ends the quote.</p>Bullet lists
Make a bullet list with asterisks. Use more asterisks to make nested lists.
Textile
Textile has several advantages over HTML:
* It's easier on the eyes
* You don't have to write all those HTML tags
** By not writing the tags yourself, you're less likely to make coding mistakes
** It requires fewer keystrokes
*** You don't wear out the keys on your keyboard as fast
*** You won't wear out your fingers as fast
* You can write it much quickerBrowser
Textile has several advantages over HTML:
- It’s easier on the eyes
- You don’t have to write all those HTML tags
- By not writing the tags yourself, you’re less likely to make coding mistakes
- It requires fewer keystrokes
- You don’t wear out the keys on your keyboard as fast
- You won’t wear out your fingers as fast
- You can write it much quicker
HTML
<p>Textile has several advantages over <span class="caps">HTML</span>:</p>
<ul>
<li>It’s easier on the eyes</li>
<li>
You don’t have to write all those <span class="caps">HTML</span> tags
<ul>
<li>
By not writing the tags yourself, you’re less likely to make
coding mistakes
</li>
<li>
It requires fewer keystrokes
<ul>
<li>You don’t wear out the keys on your keyboard as fast</li>
<li>You won’t wear out your fingers as fast</li>
</ul>
</li>
</ul>
</li>
<li>You can write it much quicker</li>
</ul>Numbered lists
Start each item in your numbered list with a number sign. For nested lists, use more number signs.
Textile
How to make a PB&J:
# Gather bread, peanut butter, and jelly
# Slice the bread if necessary
# Assemble the sandwich
## Spread peanut butter on one slice of bread
## Put jelly on another slice
## Put the two slices together
# EnjoyBrowser
How to make a PB&J:
- Gather bread, peanut butter, and jelly
- Slice the bread if necessary
- Assemble the sandwich
- Spread peanut butter on one slice of bread
- Put jelly on another slice
- Put the two slices together
- Enjoy
HTML
<p>How to make a PB&J:</p>
<ol>
<li>Gather bread, peanut butter, and jelly</li>
<li>Slice the bread if necessary</li>
<li>
Assemble the sandwich
<ol>
<li>Spread peanut butter on one slice of bread</li>
<li>Put jelly on another slice</li>
<li>Put the two slices together</li>
</ol>
</li>
<li>Enjoy</li>
</ol>Mixed nested lists
You can nest ordered lists inside unordered lists and vice-versa.
Textile
Three reasons to walk to work:
# It saves fuel
# It's good for your health
** Walking burns calories
** Time outside means lower stress
# It's good for the environmentBrowser
Three reasons to walk to work:
- It saves fuel
- It’s good for your health
- Walking burns calories
- Time outside means lower stress
- It’s good for the environment
HTML
<p>Three reasons to walk to work:</p>
<ol>
<li>It saves fuel</li>
<li>
It’s good for your health
<ul>
<li>Walking burns calories</li>
<li>Time outside means lower stress</li>
</ul>
</li>
<li>It’s good for the environment</li>
</ol>Definition lists
Each term in a definition list starts with a dash. Put a := between the term and the definition. If your definition spans multiple lines, end the definition with =:
Textile
- coffee := Hot and black
- tea := Also hot, but a little less black
- milk :=
Nourishing beverage for baby cows.
Cold drink that goes great with cookies. =:Browser
- coffee
- Hot and black
- tea
- Also hot, but a little less black
- milk
-
Nourishing beverage for baby cows.
Cold drink that goes great with cookies.
HTML
<dl>
<dt>coffee</dt>
<dd>Hot and black</dd>
<dt>tea</dt>
<dd>Also hot, but a little less black</dd>
<dt>milk</dt>
<dd>
<p>Nourishing beverage for baby cows.</p>
<p>Cold drink that goes great with cookies.</p>
</dd>
</dl>Footnotes
To reference a footnote, place the footnote number in square brackets. Don’t forget the corresponding footnote at the bottom of the page.
Textile
42.7% of all statistics are made up on the spot.[1]
fn1. "Dr. Katz":http://en.wikiquote.org/wiki/Steven_WrightBrowser
42.7% of all statistics are made up on the spot.1
HTML
<p>
42.7% of all statistics are made up on the spot.<sup
class="footnote"
id="fnr1"
><a href="#fn1">1</a></sup
>
</p>
<p class="footnote" id="fn1">
<a href="#fnr1"><sup>1</sup></a>
<a href="http://en.wikiquote.org/wiki/Steven_Wright">Dr. Katz</a>
</p>Tables
Simple tables are made by separating each cell with vertical pipes. Begin the cell with _. to indicate the cell is a heading.
Textile
|_. name|_. age|
|Walter|5|
|Florence|6|Browser
name
age
Walter
5
Florence
6
HTML
<table>
<tr>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>Walter</td>
<td>5</td>
</tr>
<tr>
<td>Florence</td>
<td>6</td>
</tr>
</table>You can make a table cell span rows or columns with a slash or backslash and the number to span. Classes, IDs, style, and alignment are also possible on table cells as with other elements.
Textile
|{background:#ddd}. Cell with background|Normal|
|. Cell spanning 2 columns|
|/2. Cell spanning 2 rows|one|
|two|
|>. Right-aligned cell|<. Left-aligned cell|Browser
| Cell with background | Normal |
| Cell spanning 2 columns | |
| Cell spanning 2 rows | one |
| two | |
| Right-aligned cell | Left-aligned cell |
HTML
<table>
<tr>
<td style="background:#ddd;">Cell with background</td>
<td>Normal</td>
</tr>
<tr>
<td colspan="2">Cell spanning 2 columns</td>
</tr>
<tr>
<td rowspan="2">Cell spanning 2 rows</td>
<td>one</td>
</tr>
<tr>
<td>two</td>
</tr>
<tr>
<td style="text-align:right;">Right-aligned cell</td>
<td style="text-align:left;">Left-aligned cell</td>
</tr>
</table>To apply attributes to the entire table, use the table. signature on a line by itself before the table data.
Textile
table(#prices).
|Adults|$5|
|Children|$2|Browser
| Adults | $5 |
| Children | $2 |
HTML
<table id="prices">
<tr>
<td>Adults</td>
<td>$5</td>
</tr>
<tr>
<td>Children</td>
<td>$2</td>
</tr>
</table>Divisions
DIV tags are used to define a division or section in an HTML document. It has no inherent meaning, but is often used by designers and developers to group or style part of a page differently than another. You can easily create a div with Textile but most people who need a div just use HTML tags in their Textile.
Textile
div. A simple div.Browser
A simple div.
HTML
<div>A simple div.</div>