Watkins Web 2: Blog

Writing HTML with Textile

(To see the formatting syntax that created this post, view the Textpattern article that created it).

Textile is basically a shorthand for writing HTML with less code. It also does some automatic typographic conversion: straight ASCII quotation marks become “smart quotes,” double dashes become em dashes — like this — etc. There’s a more comprehensive list on the Threshold State site. Update there’s also a really great Textile Reference Manual on the same site.

This is strong text and this is emphasized text. All-caps strings of text longer than 3 letters — like NASCAR — get converted to <span class="caps">NASCAR</span>. This provides us with a global hook so that we can reduce their size and add letter-spacing, creating nice-looking small-caps with a single CSS rule.

This is is a top-level heading (an h1)

This is Subheading (an h2)

  • This is an unordered list
  • Another item
  • And another item
  1. This is an ordered list
  2. Another item
  3. And another item

This is an image:

This image is 800 px wide

And here’s a blockquote:

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, — That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.

You can use the code tag for code samples: <div id="awesome">. And here’s a whole block of code:

p {
color:red;
}