Michael Slater 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 are various 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 … 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 are various 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. <a href="http://textism.com/tools/textile/">Textile</a> was originally developed by Dean Allen for the TextPattern content management system and is now widely used in wikis and blogs. <a href="http://daringfireball.net/projects/markdown/basics">Markdown</a>, created by John Gruber and Aaron Swartz, is an alternative that is conceptually similar but with a different syntax. Many of the popular blog engines provide a choice of Textile or Markdown (or HTML) for posts and comments (this site offers Textile). In this article, I’ll show the basics of Textile markup and how easy it is to use it in Rails applications. <h1>What is Textile?</h1> Textile strives to make text markup as clean and simple as possible. You don’t have to put <code></code> in front of each paragraph; bare text is automatically surrounded by <code></code> and <code></code> tags. To make a first-level heading, just start the line with @h1. @. For example: <pre> h1. This is a heading and will be wrapped in <h1> and </h1> tags This is a text paragraph and will be wrapped in and tags. This is another paragraph. </pre> 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: <pre> *This text will render in bold* _This text will render in italic* _*This text will render in bold italic*_ </pre> To add a link to a piece of text, surround the text in quotes, and follow it by a colon and the URL: <pre> "text to be linked":http://thisistheurl.com </pre> To include an image, type its URL surrounded by exclamation points: <pre> !http://domain.com/path/to/image.jpg! </pre> To create a bullet list, start each line with an asterisk and a space, like this: <pre> * First item * Second item * Third item </pre> 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 <a href="http://hobix.com/textile/">Textile Reference</a>. You can try out Textile online at the <a href="http://www.textism.com/tools/textile/">Textile home page</a>. <h1>Implementing Textile</h1> There are Textile implementations for various environments. In my case, using Ruby on Rails, Textile is implemented by <a href="http://whytheluckystiff.net">whytheluckystiff</a> ’s <a href="http://whytheluckystiff.net/ruby/redcloth/">RedCloth</a> gem. (The current implementation does have some flaws, and a much-enhanced version called <a href="http://code.whytheluckystiff.net/redcloth/wiki/SuperRedCloth">Super RedCloth</a> is in development.) To install, just enter the following in the console: <pre> gem install RedCloth </pre> With RedCloth installed, you create a new RedCloth object and pass some Textile-marked-up text to it: <pre> textile_styled_text ="h1. This is an example of a heading in Textile" textile_object = RedCloth.new(textile_styled_text) </pre> Then, when you want to render this as HTML, you simply use: <pre> html = textile_object.to_html </pre> <h1>Making Textile Even Easier</h1> That’s pretty easy, but you can make it even easier. There’s a Rails helper “textilize,” but thanks to the <a href="http://errtheblog.com/post/14">acts_as_textiled</a> plug from Chris Wanstrath, it’s even easier than that. Install this plugin: <pre> ruby script/plugin install svn://errtheblog.com/svn/plugins/acts_as_textiled </pre> And then all you have to do is declare a model attribute as Textile-formatted in your model class: <pre> acts_as_textiled :field_name </pre> 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. <h1>Markup without Coding</h1> You can also simplify the entry of Textile markup by using the <a href="http://slateinfo.blogs.wvu.edu/plugins/textile_editor_helper">textile_editor_helper</a> 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: <img src="/textile_helper.jpg" alt="" /> When you click an icon, JavaScript code inserts the appropriate markup into your text. To use this, first install the plugin: <pre> ruby script/plugin install http://svn.webtest.wvu.edu/repos/rails/plugins/textile_editor_helper rake textile_editor_helper:install </pre> And then replace the text_area tag in the form in which the user enters the Textile-formatted text with textile_editor: <pre> <%= textile_editor 'object', 'field' -%> </pre> textile_editor takes all the same options as text_area. and at the end of the form add: <pre> <%= textile_editor_initialize -%> </pre> Finally, if you don’t already include prototype.js, you’ll need to add that to your layout: <pre> <%= javascript_include_tag 'prototype.js' %> </pre> 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. 2008-07-24T01:00:46-07:00

6399

5019

Easy Text Formatting with Textile

2008-05-09T17:00:00-07:00

0 0

2009-04-03T13:17:00-07:00