These days, many websites allow you to enter your own content — whether it’s creating a Web page, writing a blog post, or posting in a forum. In order to allow people to enter richly-formatted text and images, many sites use WYSIWYG (What You See Is What You Get) HTML editors. Great though these editors are, they do have a few drawbacks.
In this article you’ll learn about 2 popular alternatives to WYSIWYG editors: Textile and Markdown. You’ll learn what they are, how to install them, and how to use them. You’ll also compare them to each other, and to using WYSIWYG editors. The article ends with lots of useful links to help you find out more about Textile and Markdown.
The trouble with WYSIWYG editors
You’re probably familiar with WYSIWYG HTML editors. I’m talking about the JavaScript-based visual editors that are embedded into blog systems like WordPress and content management systems like Drupal.
The most popular WYSIWYG editors are the catchily-named CKEditor and TinyMCE. You can read more about these 2 editors, and find out how to integrate them into your site, in my article Adding a WYSIWYG HTML Editor to Your Site.
These editors can be very useful, as they allow people with no knowledge of HTML to insert richly-formatted content — including text, images, and even video — into their blogs and websites. However, they do have several drawbacks:
- They produce poor-quality HTML. WYSIWYG editors are better than they used to be, but they still often turn out bloated, semantically confusing HTML, ridden with unnecessary
classandstyleattributes. - They can ruin a website’s design. People using WYSIWYG editors are usually free to choose their own fonts, colours and images (although it is possible to lock down users’ options to some extent). This often means that the style of the content clashes with the style of the site’s templates. The end result is a horrible mess.
- They’re large. These editors often weigh in at several hundred kB, which causes a noticeable delay when the page loads.
- They’re relatively slow to use. Typically, you have to format your content by clicking on buttons and using drop-down menus. This is fine if you prefer the mouse, but there isn’t the range of keyboard shortcuts available to, say, Word users.
- They can be inflexible. The editors tend to want you to do things their way. This can make it very hard if you want to insert your own custom HTML. For example, many WYSIWYG editors will strip out an empty
divelement if you try to add it yourself!
That said, many people use these editors in their Web applications because users demand an easy way to enter rich content. Those users don’t want to learn HTML, so what’s an application developer to do?
The alternative: Easy-to-use markup languages
Recently, a middle ground has opened up in the form of simple markup languages like Textile and Markdown. These languages are known as lightweight markup languages.
Essentially, the user enters their formatted content into your CMS edit form using one of these languages. Then, when they save their edits, the content is converted to HTML by your CMS.
Your CMS can convert the markup to HTML when the user saves their edits, or when the content is viewed. The first approach is more efficient, since you don’t have to convert the markup every time the content is displayed. It’s also a good idea to store both Textile/Markup and HTML versions of the content in separate fields in your database. That way the user can easily go back and re-edit their content in Textile or Markup format.
There are implementations of Textile and Markdown available in many languages, from JavaScript through to PHP, Python, Ruby, and ASP.NET.
For links to various implementations, see the “Find out more” section at the end of this article.
The nice thing about these markup languages is that, unlike HTML, you can easily read and make sense of the original markup. Here’s an example:
Some HTML content:
<h1>Widgets report</h1>
<p>Compared to <a href="sales-2006.html">last year</a>, widget sales were <strong><em>really</em> good</strong> this year, primarily due to the introduction of the MegaWidget (photo below):</p>
<p><img src="megawidget-photo.jpg" alt="MegaWidget Photo" /></p>
<p>Next year we plan to introduce more products:</p>
<ul>
<li>The HyperWidget</li>
<li>The CosmoWidget, and</li>
<li>The SupaDupaWidget.</li>
</ul>
<h2>A table of widget sales</h2>
<table>
<caption>Widget sales figures, 2007</caption>
<tr>
<th>Product</th>
<th>1st quarter</th>
<th>2nd quarter</th>
<th>3rd quarter</th>
<th>4th quarter</th>
</tr>
<tr>
<th>SupaWidget</th>
<td>$9,940</td>
<td>$10,100</td>
<td>$9,490</td>
<td>$11,730</td>
</tr>
<tr>
<th>WonderWidget</th>
<td>$19,310</td>
<td>$21,140</td>
<td>$20,560</td>
<td>$22,590</td>
</tr>
<tr>
<th>MegaWidget</th>
<td>$25,110</td>
<td>$26,260</td>
<td>$25,210</td>
<td>$28,370</td>
</tr>
</table>
The same content written using Textile:
h1. Widgets report
Compared to "last year":sales-2006.html, widget sales were *_really_ good* this year, primarily due to the introduction of the MegaWidget (photo below):
!megawidget-photo.jpg(MegaWidget Photo)!
Next year we plan to introduce more products:
* The HyperWidget
* The CosmoWidget, and
* The SupaDupaWidget.
h2. A table of widget sales
|_. Product|_. 1st quarter|_. 2nd quarter|_. 3rd quarter|_. 4th quarter|
|_. SupaWidget|$9,940|$10,100|$9,490|$11,730|
|_. WonderWidget|$19,310|$21,140|$20,560|$22,590|
|_. MegaWidget|$25,110|$26,260|$25,210|$28,370|
The same content written using Markdown:
Widgets report
==============
Compared to [last year](sales-2006.html), widget sales were ***really* good** this year, primarily due to the introduction of the MegaWidget (photo below):
Next year we plan to introduce more products:
* The HyperWidget
* The CosmoWidget, and
* The SupaDupaWidget.
A table of widget sales
-----------------------
<table>
<caption>Widget sales figures, 2007</caption>
<tr>
<th>Product</th>
<th>1st quarter</th>
<th>2nd quarter</th>
<th>3rd quarter</th>
<th>4th quarter</th>
</tr>
<tr>
<th>SupaWidget</th>
<td>$9,940</td>
<td>$10,100</td>
<td>$9,490</td>
<td>$11,730</td>
</tr>
<tr>
<th>WonderWidget</th>
<td>$19,310</td>
<td>$21,140</td>
<td>$20,560</td>
<td>$22,590</td>
</tr>
<tr>
<th>MegaWidget</th>
<td>$25,110</td>
<td>$26,260</td>
<td>$25,210</td>
<td>$28,370</td>
</tr>
</table>
You can see that both the Textile and Markdown content is easier to read — and type — than the HTML version.
Textile and Markdown let you create many HTML structures very easily, such as:
- Text formatting (bold, italic)
- Links
- Headings (level 1, 2, 3 etc)
- Lists
- Tables (Textile only)
- Images
- “Curly” quotes
- HTML entities like
&and—
You can also place HTML tags inside the Textile/Markdown markup, which is great if you want to add things not supported by the language (such as tables in Markdown).
Why are Textile and Markdown better than WYSIWYG editors?
Well, OK — they’re not necessarily better. You can usually do more things with a WYSIWYG editor, and the WYSIWYG interface is familiar to users of word processors. However, these lightweight languages are ideal if you (or your users) mainly want to enter text content, with headings, lists, links, and the odd image.
Specifically, these markup languages offer the following advantages over WYSIWYG editors:
- No JavaScript editor required. Since the user creates their content using plain text, you can give them a simple
textareaelement to enter the content. This means your edit form is quick to load and works on pretty much all browsers. - They’re quick to use. No buttons to click or shortcut keys to hunt for. Once you’ve learned the syntax, entering and formatting text is quick and easy.
- The content is very portable. Since the content is plain text, you can compose your content offline in any text editor then paste it into the edit form when you go online, knowing that the formatting won’t get mangled.
- They produce nice clean, valid HTML. Since these languages are much simpler than a WYSIWYG editor, they’re easily translated into clean, semantic HTML markup.
Which is better: Textile or Markdown?
Textile and Markdown are both excellent languages, so a lot of it comes down to personal preference.
I prefer Markdown because I find it easier to read — it takes its influence from the way people write plain-text emails, so the style of formatting is very familiar. I also like the more explicit way it handles links and images.
On the other hand, Textile’s headings are easier to decipher once you get past level 2 headings, and unlike Markdown it can do tables by default. There also seem to be more implementations of Textile, probably because it’s been around for longer than Markdown.
Here’s a good comparison of Textile and Markdown.
Find out more
Demos
You can try out Textile and Markdown online to see which you prefer:
Language references
Syntax references for both languages:
Implementations
Implementations in various programming languages:
- Textile: The reference implementation of Textile is in PHP (download). This Wikipedia page has a list of other Textile implementations at the bottom.
- Markdown: The reference implementation of Markdown is in Perl. You can download it from the Markdown home page. There’s also PHP Markdown, markdownsharp (a C# port), and Showdown (a JavaScript port).
Plugins
Textile and Markdown as plugins:
- Textile: Available as a plugin for WordPress, Drupal, Joomla, ExpressionEngine, and more.
- Markdown: The standard Markdown implementation can work with Movable Type, Blosxom and BBEdit. Find out more on the Markdown home page. People have also written Markdown plugins for WordPress/bbPress, Drupal, Joomla, ExpressionEngine, RapidWeaver, and more.
Also worth a look is MarkItUp!, a JavaScript plugin that lets you use HTML, Textile, Markdown, and more within your own CMS.
Extensions
- MultiMarkdown is a nice derivative of Markdown that adds support for footnotes, tables, citations, bibliographies, image attributes, definition lists, and more.
Summary
In this article you’ve looked at Textile and Markdown — 2 lightweight markup languages that are a good alternative to cumbersome JavaScript WYSIWYG editors. While there’s a bit of a learning curve for you or your users, the end result is a fast, easy way to enter richly-formatted content into your CMS, blog, or forum.
Leave a Reply