Not a developer? Go to MovableType.com

MovableType.org
Documentation
Home / Documentation / Author's Guide

Textile 2 Syntax 

<ul>
    <li><a href="#block_formatting">Block Formatting</a></li>
    <li><a href="#extended_blocks">Extended Blocks</a></li>
    <li><a href="#escaping">Escaping</a></li>
    <li><a href="#inline_formatting">Inline Formatting</a></li>
    <li><a href="#footnotes">Footnotes</a></li>
    <li><a href="#links">Links</a></li>
    <li><a href="#images">Images</a></li>
    <li><a href="#character_replacements">Character Replacements</a></li>
    <li><a href="#lists">Lists</a></li>
    <li><a href="#tables">Tables</a></li>
    <li><a href="#css_notes">CSS Notes</a></li>
    <li><a href="#miscellaneous">Miscellaneous</a></li>
    <li><a href="#credits">Credits</a></li>
</ul>

Block Formatting

Textile processes text in units of blocks and lines. A block might also be considered a paragraph, since blocks are separated from one another by a blank line. Blocks can begin with a signature that helps identify the rest of the block content. Block signatures include:

p
A paragraph block. This is the default signature if no signature is explicitly given. Paragraphs are formatted with all the inline rules (see inline formatting) and each line receives the appropriate markup rules for the flavor of HTML in use. For example, newlines for XHTML content receive a <br /> tag at the end of the line (with the exception of the last line in the paragraph). Paragraph blocks are enclosed in a <p> tag.
bc
A “bc” signature is short for “block code”, which implies a preformatted section like the ‘pre’ block, but it also gets a <code> tag (or for XHTML 2, a <blockcode> tag is used instead).

Note that within a “bc” block, < and > are translated into HTML entities automatically.

table
For composing HTML tables. See the “TABLES” section for more information.
bq
A “bq” signature is short for “block quote”. Paragraph text formatting is applied to these blocks and they are enclosed in a <blockquote> tag as well as <p> tags within.
h1, h2, h3, h4, h5, h6
Headline signatures that produce <h1>, etc. tags. You can adjust the relative output of these using the head_offset attribute.
clear
A ‘clear’ signature is simply used to indicate that the next block should emit a CSS style attribute that clears any floating elements. The default behavior is to clear “both”, but you can use the left (<) or right (>) alignment characters to indicate which side to clear.
dl
A “dl” signature is short for “definition list”. See the “LISTS” section for more information.
fn
A “fn” signature is short for “footnote”. You add a number following the “fn” keyword to number the footnote. Footnotes are output as paragraph tags but are given a special CSS class name which can be used to style them as you see fit.

All signatures should end with a period and be followed with a space. Inbetween the signature and the period, you may use several parameters to further customize the block. These include:

{style rule}
A CSS style rule. Style rules can span multiple lines.
[ll]
A language identifier (for a “lang” attribute).
(class) or (#id) or (class#id)
For CSS class and id attributes.
>, <, =, <>
Modifier characters for alignment. Right-justification, left-justification, centered, and full-justification.
( (one or more)
Adds padding on the left. 1em per “(” character is applied. When combined with the align-left or align-right modifier, it makes the block float.
) (one or more)
Adds padding on the right. 1em per “)” character is applied. When combined with the align-left or align-right modifier, it makes the block float.
|filter| or |filter|filter|filter|
A filter may be invoked to further format the text for this signature. If one or more filters are identified, the text will be processed first using the filters and then by Textile’s own block formatting rules.

Extended Blocks

Normally, a block ends with the first blank line encountered. However, there are situations where you may want a block to continue for multiple paragraphs of text. To cause a given block signature to stay active, use two periods in your signature instead of one. This will tell Textile to keep processing using that signature until it hits the next signature is found.

For example:

    bq.. This is paragraph one of a block quote.

    This is paragraph two of a block quote.

    p. Now we're back to a regular paragraph.

You can apply this technique to any signature (although for some it doesn’t make sense, like “h1” for example). This is especially useful for “bc” blocks where your code may have many blank lines scattered through it.

Escaping

Sometimes you want Textile to just get out of the way and let you put some regular HTML markup in your document. You can disable Textile formatting for a given block using the ‘==’ escape mechanism:

    p. Regular paragraph

    ==
    Escaped portion -- will not be formatted
    by Textile at all
    ==

    p. Back to normal.

You can also use this technique within a Textile block, temporarily disabling the inline formatting functions:

    p. This is ==*a test*== of escaping.

Inline Formatting

Formatting within a block of text is covered by the “inline” formatting rules. These operators must be placed up against text/punctuation to be recognized. These include:

*strong*
Translates into <strong>strong</strong>.
_emphasis_
Translates into <em>emphasis</em>.
**bold**
Translates into <b>bold</b>.
__italics__
Translates into <i>italics</i>.
++bigger++
Translates into <big>bigger</big>.
--smaller--
Translates into: <small>smaller</small>.
-deleted text-
Translates into <del>deleted text</del>.
+inserted text+
Translates into <ins>inserted text</ins>.
^superscript^
Translates into <sup>superscript</sup>.
~subscript~
Translates into <sub>subscript</sub>.
%span%
Translates into <span>span</span>.
@code@
Translates into <code>code</code>. Note that within a ‘@…@’ section, < and > are translated into HTML entities automatically.

Inline formatting operators accept the following modifiers:

{style rule}
A CSS style rule.
[ll]
A language identifier (for a “lang” attribute).
(class) or (#id) or (class#id)
For CSS class and id attributes.

Examples

    Textile is *way* cool.

    Textile is *_way_* cool.

Now this won’t work, because the formatting characters need whitespace before and after to be properly recognized.

    Textile is way c*oo*l.

However, you can supply braces or brackets to further clarify that you want to format, so this would work:

    Textile is way c[*oo*]l.

Footnotes

You can create footnotes like this:

    And then he went on a long trip[1].

By specifying the brackets with a number inside, Textile will recognize that as a footnote marker. It will replace that with a construct like this:

    And then he went on a long
    trip<sup class="footnote"><a href="#fn1">1</a></sup>

To supply the content of the footnote, place it at the end of your document using a “fn” block signature:

    fn1. And there was much rejoicing.

Which creates a paragraph that looks like this:

    <p class="footnote" id="fn1"><sup>1</sup> And there was
    much rejoicing.</p>

Textile defines a shorthand for formatting hyperlinks. The format looks like this:

    "Text to display":http://example.com

In addition to this, you can add ‘title’ text to your link:

    "Text to display (Title text)":http://example.com

The URL portion of the link supports relative paths as well as other protocols like ftp, mailto, news, telnet, etc.

    "E-mail me please":mailto:someone@example.com

You can also use single quotes instead of double-quotes if you prefer. As with the inline formatting rules, a hyperlink must be surrounded by whitespace to be recognized (an exception to this is common punctuation which can reside at the end of the URL). If you have to place a URL next to some other text, use the bracket or brace trick to do that:

    You["gotta":http://example.com]seethis!

Textile supports an alternate way to compose links. You can optionally create a lookup list of links and refer to them separately. To do this, place one or more links in a block of it’s own (it can be anywhere within your document):

    [excom]http://example.com
    [exorg]http://example.org

For a list like this, the text in the square brackets is used to uniquely identify the link given. To refer to that link, you would specify it like this:

    "Text to display":excom

Once you’ve defined your link lookup table, you can use the identifiers any number of times.

Images

Images are identified by the following pattern:

    !/path/to/image!

Image attributes may also be specified:

    !/path/to/image 10x20!

Which will render an image 10 pixels wide and 20 pixels high. Another way to indicate width and height:

    !/path/to/image 10w 20h!

You may also redimension the image using a percentage.

    !/path/to/image 20%x40%!

Which will render the image at 20% of it’s regular width and 40% of it’s regular height.

Or specify one percentage to resize proprotionately:

    !/path/to/image 20%!

Alt text can be given as well:

    !/path/to/image (Alt text)!

The path of the image may refer to a locally hosted image or can be a full URL.

You can also use the following modifiers after the opening ‘!’ character:

<
Align the image to the left (causes the image to float if CSS options are enabled).
>
Align the image to the right (causes the image to float if CSS options are enabled).
- (dash)
Aligns the image to the middle.
^
Aligns the image to the top.
~ (tilde)
Aligns the image to the bottom.
{style rule}
Applies a CSS style rule to the image.
(class) or (#id) or (class#id)
Applies a CSS class and/or id to the image.
( (one or more)
Pads 1em on the left for each ‘(’ character.
) (one or more)
Pads 1em on the right for each ‘)’ character.

Character Replacements

A few simple, common symbols are automatically replaced:

    (c)
    (r)
    (tm)

In addition to these, there are a whole set of character macros that are defined by default. All macros are enclosed in curly braces. These include:


    {c|} or {|c} cent sign
    {L-} or {-L} pound sign
    {Y=} or {=Y} yen sign

Many of these macros can be guessed. For example:

    {A'} or {'A}
    {a"} or {"a}
    {1/4}
    {*}
    {:)}
    {:(}

Lists

Textile also supports ordered and unordered lists. You simply place an asterisk or pound sign, followed with a space at the start of your lines.

Simple lists:

    * one
    * two
    * three

Multi-level lists:

    * one
    ** one A
    ** one B
    *** one B1
    * two
    ** two A
    ** two B
    * three

Ordered lists:

    # one
    # two
    # three

Styling lists:

    (class#id)* one
    * two
    * three

The above sets the class and id attributes for the <ul> tag.

    *(class#id) one
    * two
    * three

The above sets the class and id attributes for the first <li> tag.

Definition lists:

    dl. textile:a cloth, especially one manufactured by weaving
    or knitting; a fabric
    format:the arrangement of data for storage or display.

Note that there is no space between the term and definition. The term must be at the start of the line (or following the “dl” signature as shown above).

Tables

Textile supports tables. Tables must be in their own block and must have pipe characters delimiting the columns. An optional block signature of “table” may be used, usually for applying style, class, id or other options to the table element itself.

From the simple:

    |a|b|c|
    |1|2|3|

To the complex:

    table(fig). {color:red}_|Top|Row|
    {color:blue}|/2. Second|Row|
    |_{color:green}. Last|

Modifiers can be specified for the table signature itself, for a table row (prior to the first ‘|’ character) and for any cell (following the ‘|’ for that cell). Note that for cells, a period followed with a space must be placed after any modifiers to distinguish the modifier from the cell content.

Modifiers allowed are:

{style rule}
A CSS style rule.
(class) or (#id) or (class#id)
A CSS class and/or id attribute.
( (one or more)
Adds 1em of padding to the left for each ‘(’ character.
) (one or more)
Adds 1em of padding to the right for each ‘)’ character.
<
Aligns to the left (floats to left for tables if combined with the ‘)’ modifier).
>
Aligns to the right (floats to right for tables if combined with the ‘(’ modifier).
=
Aligns to center (sets left, right margins to ‘auto’ for tables).
<>
For cells only. Justifies text.
^
For rows and cells only. Aligns to the top.
~ (tilde)
For rows and cells only. Aligns to the bottom.
_ (underscore)
Can be applied to a table row or cell to indicate a header row or cell.
\2 or \3 or \4, etc.
Used within cells to indicate a colspan of 2, 3, 4, etc. columns. When you see “", think “push forward”.
/2 or /3 or /4, etc.
Used within cells to indicate a rowspan of 2, 3, 4, etc. rows. When you see “/”, think “push downward”.

When a cell is identified as a header cell and an alignment is specified, that becomes the default alignment for cells below it. You can always override this behavior by specifying an alignment for one of the lower cells.

CSS Notes

When CSS is enabled (and it is by default), CSS class names are automatically applied in certain situations.

Aligning a block or span or other element to left, right, etc.
“left” for left justified, “right” for right justified, “center” for centered text, “justify” for full-justified text.
Aligning an image to the top or bottom
“top” for top alignment, “bottom” for bottom alignment, “middle” for middle alignment.
Footnotes
“footnote” is applied to the paragraph tag for the footnote text itself. An id of “fn” plus the footnote number is placed on the paragraph for the footnote as well. For the footnote superscript tag, a class of “footnote” is used.
Capped text
For a series of characters that are uppercased, a span is placed around them with a class of “caps”.

Miscellaneous

Textile tries to do it’s very best to ensure proper XHTML syntax. It will even attempt to fix errors you may introduce writing in HTML yourself. Unescaped ‘&’ characters within URLs will be properly escaped. Singlet tags such as br, img and hr are checked for the ‘/’ terminator (and it’s added if necessary). The best way to make sure you produce valid XHTML with Textile is to not use any HTML markup at all— use the Textile syntax and let it produce the markup for you.

Credits

The Textile text formatting code for Movable Type was written by Brad Choate. The Textile formatting syntax was developed by Dean Allen. Many thanks to Dean for his permission to adapt Textile for use in Movable Type.

Back