• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / HTML / Textile and Markdown: 2 Nice Alternatives to WYSIWYG Editors

Textile and Markdown: 2 Nice Alternatives to WYSIWYG Editors

16 March 2010 / Leave a Comment

MarkupThese 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 class and style attributes.
  • 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 div element 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):

![MegaWidget Photo](megawidget-photo.jpg)

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 &amp; and &mdash;

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 textarea element 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:

  • Textile demo
  • Markdown demo

Language references

Syntax references for both languages:

  • Textile syntax reference
  • Markdown syntax reference

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.

Filed Under: HTML Tagged With: CKEditor, lightweight markup language, markdown, textile, TinyMCE, wysiwyg

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits