Easy text formatting with Textile

Posted April 2, 2007 06:42 AM     2 comments

When I’m writing content for the web, I hate dealing with HTML coding. HTML is rather verbose as a markup language, and having to include closing tags is messy and error-prone.

We’re all pretty much stuck with delivering HTML code from our web sites, but that doesn’t mean we have to write in it. There’s any number of markup approaches that are superior to HTML when it comes to content creation, and which can be used as source code from which to create HTML. Two that are widely used are Textile and Markdown.

Textile was originally developed by Dean Allen for the TextPattern content management system and is now widely used in wikis and blogs. Markdown, created by John Gruber and Aaron Swartz, is an alternative that is conceptually similar but with a different syntax. The blog engine this blog uses, Mephisto, provides a choice of Textile or Markdown (or HTML) for posts and comments.

In this article, I’ll show the basics of Textile markup and how easy it is to use it in Rails applications.

What is Textile?

Textile strives to make text markup as clean and simple as possible. You don’t have to put <p> in front of each paragraph; bare text is automatically surrounded by <p> and </p> tags. To make a first-level heading, just start the line with h1. . For example:

h1. This is a heading and will be wrapped in <h1> and </h1> tagsThis is a text paragraph and will be wrapped in <p> and </p> tags.This is another paragraph.

And I bet you can guess how to make a second-level heading, or a third-level heading.

You never need to use close tags; a pair of carriage returns automatically triggers the appropriate end tag. Quotes are automatically converted to open and close quotes; hyphens are converted to n-dashes (if there is a space on either side); and double hyphens are converted to m-dashes.

To make text bold, surround it with asterisks; to make it italic, with underscores:

*This text will render in bold*_This text will render in italic*_*This text will render in bold italic*_

To add a link to a piece of text, surround the text in quotes, and follow it by a colon and the URL:

"text to be linked":http://thisistheurl.com

To include an image, type its URL surrounded by exclamation points:

!http://domain.com/path/to/image.jpg!

To create a bullet list, start each line with an asterisk and a space, like this:

* First item* Second item* Third item

Want a nested bullet list? Just indent the asterisk by three spaces.

There’s more, but this should give you a feel for it. You can also use any HTML you want for things that Textile doesn’t cover—HTML code is simply passed through. For more details, see the Textile Reference. You can try out Textile online at the Textile home page.

Implementing Textile

There are Textile implementations for various environments. In my case, using Ruby on Rails, Textile is implemented by whytheluckystiff ’s RedCloth gem. (The current implementation does have some flaws, and a much-enhanced version called Super RedCloth is in development.) To install, just enter the following in the console:

gem install RedCloth

With RedCloth installed, you create a new RedCloth object and pass some Textile-marked-up text to it:

textile_styled_text ="h1. This is an example of a heading in Textile" textile_object = RedCloth.new(textile_styled_text)

Then, when you want to render this as HTML, you simply use:

html = textile_object.to_html

Making Textile Even Easier

That’s pretty easy, but you can make it even easier. There’s a Rails helper “textilize,” but thanks to the acts_as_textiled plug from Chris Wanstrath, it’s even easier than that. Install this plugin:

ruby script/plugin install svn://errtheblog.com/svn/plugins/acts_as_textiled

And then all you have to do is declare a model attribute as Textile-formatted in your model class:

acts_as_textiled  :field_name

That’s it—everything just works! (Remember, though, that you need to restart the server for the model change to take effect.) Textile marked up text is stored in the database. Form fields automatically show unrendered textile. But any other use of the model attribute automatically delivers the rendered HTML instead of the Textile source.

Markup without Coding

You can also simplify the entry of Textile markup by using the textile_editor_helper from Dave Olsen and Chris Scharf. This plug-in renders a set of icons for the common markup tasks in your form view, just above the text entry area:

When you click an icon, JavaScript code inserts the appropriate markup into your text.

To use this, first install the plugin:

ruby script/plugin install http://svn.webtest.wvu.edu/repos/rails/plugins/textile_editor_helperrake textile_editor_helper:install

And then replace the text_area tag in the form in which the user enters the Textile-formatted text with textile_editor:

<%= textile_editor 'object', 'field' -%>

textile_editor takes all the same options as text_area.

and at the end of the form add:

<%= textile_editor_initialize -%>

Finally, if you don’t already include prototype.js, you’ll need to add that to your layout:

<%= javascript_include_tag 'prototype.js' %>

Presto! Now you have a row of icons above the text area so your users don’t have to remember any markup at all. They’ll still see the markup in the text area (this is not a wysiwyg editor), which will help them learn the markup code.