Textile

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.

Browser

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

HTML

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

Inline code

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

Textile

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

Browser

On the command line, you can just type redcloth.

HTML

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

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

Browser

  
    # 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>

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.

Browser

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

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>

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>.

Browser

I can use HTML directly in my Textile.

HTML

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

Block HTML

You can use HTML freely within your RedCloth 4 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="/" method="get">
    h3. Your cart

    * Item one
    * Item two

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

  </form>
</div>

Browser

Your cart

  • Item one
  • Item two

HTML

<div id="shopping-cart">
  <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>

No Textile

You can have RedCloth 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*.

Browser

Don't touch this!

Use *asterisks* to say something strongly.

HTML

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

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.

Browser

This has no textile formatting, see?

And this notextile block

Just keeps going and going.

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>

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 /=
             / ^ \
          {}/\\ //\
          __\ " " /__
         (____/^\____)

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 /=
             / ^ \
          {}/\\ //\
          __\ " " /__
         (____/^\____)
  

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
>

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

Browser

All monospaced
Even the blank lines

But now a paragraph

HTML

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

We'd love to keep in touch!

Opt in for occasional updates from us. Privacy Policy