Using the Textile View Helper

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.


Block modifier syntax

Header: h(1-6).

Paragraphs beginning with 'hn. ' (where n is 1-6) are wrapped in header tags.

h1. Header...

Paragraph: p. (also applied by default)

p. Text

Blockquote: bq.

bq. Block quotation...
<blockquote>Block quotation...</blockquote>

Blockquote with citation: bq.:http://citation.url

bq.: Text...
<blockquote cite="">Text...</blockquote>

Footnote: fn(1-100).

fn1. Footnote... 
<p id="fn1">Footnote...</p>

Numeric list: #,

Consecutive paragraphs beginning with # are wrapped in ordered list tags.

<ol><li>ordered list</li></ol>

Bulleted list: , *

Consecutive paragraphs beginning with * are wrapped in unordered list tags.

<ul><li>unordered list</li></ul>

Definition list: Terms ;, ;;

Definitions :, ::

Consecutive paragraphs beginning with ; or : are wrapped in definition list tags.


Redcloth-style Definition list:

  • Term1 := Definition1
  • Term2 := Extended
  • definition =:

Phrase modifier syntax











deleted text


inserted text







<code>computer code</code>


<span class="bob">span</span>


leave text alone (do not format)


<a href="url">linktext</a>


<a href="url" title="title">linktext</a>


<a href="url">url</a>


<a href="url" title="title">url</a>
<img src="imageurl" />
<img src="imageurl" alt="alt text" />
<a href="linkurl"><img src="imageurl" /></a>


<acronym title="Always Be Closing">ABC</acronym>

Linked Notes:

Allows the generation of an automated list of notes with links.

Linked notes are composed of three parts, a set of named definitions, a set of references to those definitions and one or moreplaceholders indicating where the consolidated list of notes is to be placed in your document.


Each note definition must occur in its own paragraph and should look like this...

note#mynotelabel. Your definition text here.

You are free to use whatever label you wish after the # as long as it is made up of letters, numbers, colon(:) or dash(-).


Each note reference is marked in your text like this1 and it will be replaced with a superscript reference that links into the list of note definitions.

List Placeholder(s).

The note list can go anywhere in your document. You have to indicate where like this...


notelist can take attributes (class#id) like this: notelist(class#id).

By default, the note list will show each definition in the order that they are referenced in the text by the references. It will show each definition with a full list of backlinks to each reference. If you do not want this, you can choose to override the backlinks like this...

notelist(class#id)!.    Produces a list with no backlinks.
notelist(class#id)^.    Produces a list with only the first backlink.

Should you wish to have a specific definition display backlinks differently to this then you can override the backlink method by appending a link override to the definition you wish to customise.

note#label.    Uses the citelist's setting for backlinks.
note#label!.   Causes that definition to have no backlinks.
note#label^.   Causes that definition to have one backlink (to the first ref.)
note#label*.   Causes that definition to have all backlinks.

Any unreferenced notes will be left out of the list unless you explicitly state you want them by adding a '+'. Like this...

notelist(class#id)!+. Giving a list of all notes without any backlinks.

You can mix and match the list backlink control and unreferenced links controls but the backlink control (if any) must go first. Like so: notelist^+. , not like this: notelist+^.

Scientists say2 the moon is small.

Would output (the actual IDs used would be randomised)...

<p>Scientists say<sup><a href="#def_id_1" id="ref_id_1a">1</sup> the moon is small.</p>
<ol class="myclass" id="myid">
  <li class="myliclass"><a href="#ref_id_1a"><sup>a</sup></a><span id="def_id_1"> </span><a href="url">Proof</a> of a small moon.</li>
  <li>An unreferenced note.</li>

The 'a b c' backlink characters can be altered too. For example if you wanted the notes to have numeric backlinks starting from 1:


Table syntax

Simple tables

|With an||empty|cell|
|=. My table caption goes here  (NB. Table captions *must* be the first line of the table else treated as a center-aligned cell.)
|_. A|_. table|_. header|_.row|

Tables with attributes

table{border:1px solid black}. My table summary here
{background:#ddd;color:red}. |{}| | | |

To specify thead / tfoot / tbody groups, add one of these on its own line above the row(s) you wish to wrap (you may specify attributes before the dot):

|^.     # thead
|-.     # tbody
|~.     # tfoot

Column groups

|:\3. 100|


<colgroup span="3" width="100"></colgroup>

You can omit either or both of the \N or width values. You may also add cells after the colgroup definition to specify col elements with span, width, or standard Textile attributes:

|:. 50|(firstcol). |\2. 250||300|


<colgroup width="50">
  <col class="firstcol" />
  <col span="2" width="250" />
  <col />
  <col width="300" />


Note that, per the HTML specification, you should not add span to the colgroup if specifying col elements.)

Applying Attributes

Most anywhere Textile code is used, attributes such as arbitrary css style, css classes, and ids can be applied. The syntax is fairly consistent.

The following characters quickly alter the alignment of block elements:

Left align <

p<. left-aligned para

Right align >

h3>. right-aligned header 3

Centred =

h4=. centred header 4

Justified <>

p<>. justified paragraph

These will change vertical alignment in table cells:

Top ^

|^. top-aligned table cell|

Middle -

|-. middle aligned|

Bottom ~

|~. bottom aligned cell|

Plain (parentheses) inserted between block syntax and the closing dot-space indicate classes and ids:

p(hector). paragraph -> <p class="hector">paragraph</p>
p(#fluid). paragraph -> <p id="fluid">paragraph</p>
(classes and ids can be combined)
p(hector#fluid). paragraph -> <p class="hector" id="fluid">paragraph</p>

Curly {brackets} insert arbitrary css style

p{line-height:18px}. paragraph -> <p style="line-height:18px">paragraph</p>
h3{color:red}. header 3 -> <h3 style="color:red">header 3</h3>

Square [brackets] insert language attributes

p[no]. paragraph -> <p lang="no">paragraph</p>
%[fr]phrase% -> <span lang="fr">phrase</span>

Usually Textile block element syntax requires a dot and space before the block begins, but since lists don't, they can be styled just using braces

#{color:blue} one
# big                    
# list                   
<ol style="color:blue">

Using the span tag to style a phrase

It goes like this, %{color:red}the fourth the fifth%
It goes like this, <span style="color:red">the fourth the fifth</span>

Ordered List Start & Continuation

You can control the start attribute of an ordered list like so;

<a href="">#5</a> Item 5
# Item 6

You can resume numbering list items after some intervening anonymous block like so...

#_ Item 7
# Item 8
Powered by Generated: Wednesday, March 23rd 2022 at 3:55pm