Inline Text modifiers

examples:

n.b. any text modifier could have a markup modifier to give it an html id / style / cssclass, see markup modifiers. e.g. *{color:red}strong* gives: strong

Paragraphs

Markup: <multi-line text>

this is a *paragraph* written
in textile

<p>this is a <strong>paragraph</strong> written<br/>
in textile<p>

n.b. Paragraphs (and any block) are separated by a blank line.
n.b. With hardbreak option (on by default) any newline inside paragraph are rendered as <br/> line break tags.
n.b. To give a paragraph an html id / style / cssclass, use the explicit p. form with markup modifiers before "."
e.g.

p(#parid)(classname).
this is a paragraph written
in textile

Headers

Markup: h<1-6>. <header text>

h4. This is a header

<h4>This is a header</h4>

n.b. To give a header an html id / style / cssclass, use markup modifiers before "." e.g. h2(#hid1). headertxt

Lists

Markup: [*|#]{1,4} <list txt>
(* is for bullet lists, # for numbered lists)

* Item A
** Item A1
** Item A2
* Item B
** Item B1
*** Item B11

<ul style="list-style-type:disc">
    <li>Item A
    <ul style="list-style-type:disc">
        <li>Item A1</li>
        <li>Item A2</li>
    </ul></li>
    <li>Item B
    <ul style="list-style-type:disc">
        <li>Item B1
        <ul style="list-style-type:disc">
            <li>Item B11</li>
        </ul>
        </li>
    </ul>
    </li>
</ul>

Bullet lists can be mixed with numbered lists (for distinct nesting levels)

* This is a bullet list item
## this is the start of an enumerated list within a bulleted list
## this is another item list of an enumerated list within a bulleted list
*** this is another level, a bulleted list with an enumerated within a bullet list
*** and another bullet
* This is another bullet at level 1

Tables

Markup:
|[_.] <celltxt> |{1,}
...

|_. THeader1 |_. THeader2 |_. THeader3 |_. THeader4 |
| A |{color:red}. simple | table | row |
| And | another | table | row |
| With an | | empty | cell |

<table>
    <tbody>
        <tr><th>THeader1</th><th>THeader2</th><th>THeader3</th><th>THeader4</th></tr>
        <tr><td>A</td><td style="color:red">simple</td><td>table</td><td>row</td></tr>
        <tr><td>And</td><td>another</td><td>table</td><td>row</td></tr>
        <tr><td>With an</td><td></td><td>empty</td><td>cell</td></tr>
    </tbody>
</table>

n.b. You can use || instead of |_. to mark for header cells (but this is not official Textile syntax)
n.b. To give a cell an html id / style / cssclass, use markup modifiers after "|" start, terminated by a ". " separator, e.g. |{color:red}. celltxt |
n.b. To give a table an html id / style / cssclass, on the line before usual table markup add the explicit table. form with markup modifiers before ".", e.g. table(#t1).

Spanning rows and columns

Use \<ncols>. for a column span.

|\2. spans two cols |
| col 1 | col 2 |

<table>
    <tbody>
        <tr><td colspan="2">spans two cols</td></tr>
        <tr><td>col 1</td><td>col 2</td></tr>
    </tbody>
</table>

Use /<nrows>. for a row span.

|/3. spans 3 rows | row a |
| row b |
| row c |

<table>
    <tbody>
        <tr><td rowspan="3">spans 3 rows</td><td>row a</td></tr>
        <tr><td>row b</td></tr>
        <tr><td>row c</td></tr>
    </tbody>
</table>

"Rich" tables (jquery dataTable)

Caution: this not official Textile syntax, it won't be portable to another system.

Before table markup, add jtable. (and table must have defined headers)

jtable.
|_. THeader1 |_. THeader2 |_. THeader3 |_. THeader4 |
| A | simple | table | row |
| And | another | table | row |
| With an | | empty | cell |

n.b. if you want several rich tables within same page, you should give them distinct ids, using (#id) modifier e.g. jtable(#rt1).

Images

Markup: !<imgsrc>!

!/resources/images/logo.gif!

<img src="/resources/images/logo.gif" alt="image"/>

n.b. you could use absolute/full URLs e.g. https://edouard.decastro.name/resources/images/logo.gif
n.b. to add an html id / style / cssclass, use markup modifiers right after starting !, terminated by a ". " separator, e.g. !(aclassname). a-src!

Slideshow (jslider)

Caution: this not official Textile syntax, it won't be portable to another system.

Markup:
slider.
!<imgsrc>!{2,}

slider{width:460px;height:140px;}(#s1).
!https://venomzone.expasy.org/resources/images/venomzone_logo_t2_160px.png!
!https://viralzone.expasy.org/resources/images/viralzone.jpg!

n.b. if you want several sliders within same page, you should give them distinct ids, using (#id) modifier e.g. slider(#s1).

Links

Markup for regular links: "<linktxt>":<url>

"Wikipedia":https://en.wikipedia.org/

<a href="https://en.wikipedia.org/">Wikipedia</a>

Markup for image links: !<imgsrc>!:<url>

!/resources/images/logo.gif!:https://textpattern.com/

<a href="https://textpattern.com/"><img src="/resources/images/logo.gif" alt="image"/></a>

n.b. you could use local/relative URLs e.g. /pages/1980
n.b. to link inside element within the same page use anchor URLs: #<html_elem_id> e.g. #paragraphs
n.b. double quotes (") inside link text should be \ escaped (otherwise would mark end of link markup).
n.b. to add an html id / style / cssclass, use markup modifiers right after starting ", terminated by a ". " separator, e.g. "(aclassname). a-link":/a-url

Link URLs

You must url encode spaces (%20) as space mark the end of a textile link.
You should also url encode a final ")" - part of url - into %29, otherwise it will be considered as a glued right parenthesis not part of url. All those character ['",;.:)*_@-+^~] when at the url end must also be url encoded.
Some alphanumerical characters used as inline modifiers (*_@-^~) as well as &, when used inside urls are auto url-encoded, but if you have any doubt/problem you could use an online url encoder

So e.g. to display a link with this query text & url:

annotation:(type:"catalytic activity" chebi:"(3R)-3-hydroxy-L-arginine residue [78294]")

your link should look:

"annotation:(type:\"catalytic activity\" chebi:\"(3R)-3-hydroxy-L-arginine residue [78294]\")":/uniprot/?query=annotation:(type:"catalytic%20activity"%20chebi:"(3R)-3-hydroxy-L-arginine%20residue%20[78294]"%29

to get the correct display and link:

Non paragraph blocks

blockquote

(markup-rendered) quoted block

bq.
this is a blockquote

<blockquote>this is a blockquote</blockquote>

n.b. you can use markup modifiers to add style / id / css-class to your block e.g. bq{red}. this is a red blockquote

> shorthand syntax:
(markup modifiers not supported)

> this is a blockquote

pre

(un-markup-rendered, xml-escaped) preformatted text block.

pre.
this is a pre

this is a pre

<pre>this is a pre</pre>

n.b. you can use markup modifiers to add style / id / css-class to your block
n.b. any content is xml-escaped (< converted to &gt; etc...)

<pre> ... </pre> special syntax:
To have blank lines within a pre block (that would normally break markup block definition) you could nest the whole pre content (without the pre. ) inside <pre> ... </pre> tags (caution: block will end at first encountered </pre>; to have internal/child <pre> use &lt;pre&gt; for inner pre)

<pre>
This is an explicit "spanning" pre
</pre>

n.b. <code> tags (not content) nested inside those explicit <pre> are not xml-escaped (this could be use to make pre with code examples with colors)

code

(un-markup-rendered, xml-escaped) code block.

code.
x = x + 1

<code>x = x + 1</code>

n.b. you can use markup modifiers to add style / id / css-class to your block
n.b. any content is xml-escaped (< converted to &gt; etc...)

blockcode

(un-markup-rendered, xml-escaped) block of code

bc.
this is a blockcode

this is a blockcode

<pre><code>this is a blockcode<code></pre>

n.b. you can use markup modifiers to add style / id / css-class to your block
n.b. any content is xml-escaped (< converted to &gt; etc...) (so is less flexible than <pre><code> ...)

div

(rendered) div block.
Caution: is not official Textile syntax!

div.
this is a div

<div>this is a div</div>

n.b. you can use markup modifiers to add style / id / css-class to your block

Miscellaneous

Comments

not visible in rendered output

###. This is a textile comment

Thematic break

----

will be rendered as a thematic break (<hr/>)

html tag mix and match

~any xml tag (ouside of: pre, code, image & link markup ...) will be rendered as is / preserved (no xml escaping)

<div>
this is *mixed* _textile_ - <em>xhtml</em> content
</div>

Markup modifiers

Adds style, css-class, id to ~any markup

n.b. modifiers could be combined e.g. p(#parid)(classname). Lorem ipsum
n.b. ( and ) indent modifiers are cumulative e.g. p)))>. Lorem ipsum will generate:
<p style="padding-right:3em;text-align:right;">Lorem ipsum</p>

Escaping markup

As wiki markup by definition uses regular character sequences to specify formatting, many characters are therefore reserved and should be escaped to be displayed "as is". You can escape any character with \ this will prevent it of being considered as markup.

e.g. *ipsum* will be displayed as *ipsum* (when *ipsum* will be displayed as ipsum)

Tip: if you have unwanted rendering (e.g. crossed out text) try first to escape characters usually serving as inline text modifiers (-*_+~^%@)

n.b. if the escaped character is not markup, it will be displayed just the same as if it had no escape.
n.b. to display \ character, escape the backslash with a second \ (or use entity &#92;).
n.b. to display raw xml/html entity code you could escape char after &, e.g. &#42; will be shown as &#42; instead of *
p.s. instead of using \ you could use the corresponding XML entity to represent the reserved character (see "Entity Number" column in this table) e.g. use &#42; for * instead of \* ; this is less readable, but likely more Textile standard.