HTML Integration and Escapement

HTML spans

You can enclose a bit of text in an HTML span tag by enclosing it in percent signs. Then you can apply attributes to the span (see attributes).

Textile

I can put in a %(myclass)span with a class% like this.

HTML

<p>I can put in a <span class="myclass">span with a class</span> like this.</p>

Browser

I can put in a span with a class like this.

Inline code

To mark code in your text, surround the code with at signs.

Textile

On the command line, you can just type @bash@.

HTML

<p>On the command line, you can just type <code>bash</code>.</p>

Browser

On the command line, you can just type bash.

Block code

You can insert a block of code with the bc. block signature.

Textile

bc. # Output "I love Ruby"
say = "I love Ruby"
puts say

HTML

<pre><code># Output "I love Ruby"
say = "I love Ruby"
puts say</code></pre>

Browser

# Output "I love Ruby"
say = "I love Ruby"
puts say

Extended block code

Use bc.. and the block of code will continue to include blank lines until it encounters another block signature such as p.

Textile

bc.. # Output "I love Ruby"
say = "I love Ruby"
puts say

# Output "I *LOVE* RUBY"
say['love'] = "*love*"
puts say.upcase

p. And that is how you do it.

HTML

<pre><code># Output "I love Ruby"
say = "I love Ruby"
puts say</code>

<code># Output "I *LOVE* RUBY"
say['love'] = "*love*"
puts say.upcase</code></pre>
<p>And that is how you do it.</p>

Browser

# Output "I love Ruby"
say = "I love Ruby"
puts say

# Output "I *LOVE* RUBY"
say['love'] = "*love*"
puts say.upcase

And that is how you do it.

Inline HTML

You can use HTML right in your paragraph text, presuming the site administrator has not set :filter_html or :sanitize_html restrictions.

Textile

I can use HTML directly in my <span class="youbetcha">Textile</span>.

HTML

<p>I can use <span class="caps">HTML</span> directly in my <span class="youbetcha">Textile</span>.</p>

Browser

I can use HTML directly in my Textile.

Block HTML

You can use HTML freely within your Textile. HTML tags on a line by themselves will not be mangled. Don’t forget to leave a blank line after any Textile, just like usual.

Textile

<div id="shopping-cart">
<form action="form_action" method="get">
h3. Your cart

* Item one
* Item two

<p><input type="submit" value="Check Out" /></p>

</form>
</div>

HTML

<div id="shopping-cart">
<form action="form_action" method="get">
<h3>Your cart</h3>
<ul>
	<li>Item one</li>
	<li>Item two</li>
</ul>
<p><input type="submit" value="Check Out" /></p>
</form>
</div>

Browser

No Textile

You can have Textile skip a chunk of text with the <notextile> tag or double-equals.

Textile

<notextile>
Don't touch this!
</notextile>

Use ==*asterisks*== to say something *strongly*.

HTML

Don't touch this!
<p>Use *asterisks* to say something <strong>strongly</strong>.</p>

Browser

Don't touch this!

Use *asterisks* to say something strongly.

Notextile block

Notextile can also be used as a normal or extended Textile block.

Textile

notextile. This has *no* textile formatting, see?

notextile.. And this notextile block

Just keeps going and going.

p. Until you end it with another block.

HTML

This has *no* textile formatting, see?

And this notextile block

Just keeps going and going.<p>Until you end it with another block.</p>

Browser

This has *no* textile formatting, see? And this notextile block Just keeps going and going.

Until you end it with another block.

Preformatted text

Preformatted text can be put in a pre. block and its whitespace will be preserved. pre. is almost identical to bc., except that <code>...</code> tags are not used within the <pre> block.

Textile

pre.      Text in a pre block
is displayed in a fixed-width
     font. It preserves
  s p a c e s, line breaks
     and ascii bunnies.
           _     _   
           \`\ /`/   
            \ V /    
            /. .\    
           =\ T /=   
            / ^ \    
         {}/\\ //\   
         __\ " " /__ 
        (____/^\____)

HTML

<pre>     Text in a pre block
is displayed in a fixed-width
     font. It preserves
  s p a c e s, line breaks
     and ascii bunnies.
           _     _   
           \`\ /`/   
            \ V /    
            /. .\    
           =\ T /=   
            / ^ \    
         {}/\\ //\   
         __\ " " /__ 
        (____/^\____)</pre>

Browser

     Text in a pre block
is displayed in a fixed-width
     font. It preserves
  s p a c e s, line breaks
     and ascii bunnies.
           _     _   
           \`\ /`/   
            \ V /    
            /. .\    
           =\ T /=   
            / ^ \    
         {}/\\ //\   
         __\ " " /__ 
        (____/^\____)

Extended preformatted

Use pre.. to make a block of extended preformatted text that continues until it encounters another block signature, like p.

Textile

pre.. All monospaced

Even the blank lines

p. But now a paragraph

HTML

<pre>All monospaced</pre>
<pre>Even the blank lines</pre>
<p>But now a paragraph</p>

Browser

All monospaced

Even the blank lines

But now a paragraph