Lightweight Markup Languages | 2

Lightweight markup languages are markup languages designed with an honest attempt to make them simple enough for non-programmers to read and write in them. They were originally used on text-only displays on which you could not display bold or italicized text. Another application of lightweight markup languages is where people might need to read the document source as well as present a well-formatted rendered output.

Until a few years ago, to publish anything on the internet, you had three options:

In the last few years, the first two options have not changed. The third option however, has become a lot simpler. You have ready-made content management systems and weblogs, which make it a lot simpler for you to publish your ideas yourself. You enter the content (with a little bit of markup) into text boxes and that is converted into a standard document markup language like HTML or XML.

There are several lightweight markup languages available on the internet. In this article, we will see how to use the two most popular languages: Textile and Markdown.

Textile

Textile was developed by Dean Allen and he called it the "the humane web text generator". It was originally implemented in PHP, but later on others translated it into other programming languages like Perl, Python and Java. The current version of Textile is version 2.0 that was launched in 2006.

You can download the source code for PHP from here.

Markdown

The creators of Markdown, John Gruber and Aaron Swartz felt the need to develop a language with maximum readability of both the source code as well as the rendered output. It has taken cues from existing conventions for marking up plain text in emails. Gruber originally wrote Markdown in Perl, but then it was translated into other languages too.

Markdown doesn't support some of the features, like inline HTML and tables, that Textile does. However, Markdown Extra is a lightweight markup language that extends Markdown. We will look at how Markdown Extra implements those missing features.

You can download the source code of Markdown Extra in PHP from here.

And the others

There are several other lightweight markup languages like WikiText, Setext, ATX and etText. There could be many reasons as to why these didn't become popular. Personally I find them either unintuitive and complicated or not featured enough. As far as I am concerned, lightweight markup languages are meant to be used for formatting text for the web, not for writing technical documents.

HTML Elements in Textile/Markdown

The purpose of this article is to see how the various features can be implemented using both languages. It will give you a basis for deciding which language suits your needs better. I have covered the following elements, which are most often used by people:

• Headings
• Phrase Emphasis
• Horizonal Rules
• Links
• Images
• Ordered & Unordered Lists
• Tables

Headings

HTML supports six levels of headings, <h1> thru <h6>. Both Textile and Markdown also support up to six headings. Textile is extremely particular about white spaces. You need to put a space after specifying the heading size and a blank line after each marked up line. Markdown however is easier on the white space. You don't need to leave a space after the hashes, and you can optionally add the same number of hashes at the end of the line.

Textile

h1. This is h1 h2. And this h2

Generated HTML code:

<h1>This is h1</h1> <h2>And this h2</h2>

Markdown

###This is heading 3 using Markdown.### ####H4 in Markdown

Generated HTML code:

<h3>This is heading 3 using Markdown.</h3> <h4>H4 in Markdown</h4>

Phrase Emphasis

There are several ways to lay emphasis on a phrase in HTML. Textile supports many of them while Markdown only supports bold and italics.

Textile

_This sentence is italicized._ The last 3 words of this sentence *are in bold*. You can also strike through -a phrase-. And to +insert a text, you can do like this+. This is the 3 ^rd^ time I am telling you the same thing. H ~2~ 0 is essential to life. This is %spanned out% text. You can also insert some @@ code in the middle of a sentence.

Generated HTML code:

<p><em>This sentence is italicized.</em></p> <p>The last 3 words of this sentence <strong>are in bold</strong>.</p> <p>You can also strike through <del>a phrase</del>.</p> <p>And to <ins>insert a text, you can do like this</ins>.</p> <p>This is the 3 ^rd time I am telling you the same thing.</p> <p>H ₂ 0 is essential to life.</p> <p>This is <span>spanned out</span> text.</p> <p>You can also insert some <code><html></code> code in the middle of a sentence.</p>

HTML output:

This sentence is italicized.

The last 3 words of this sentence are in bold.

You can also strike through .

And to insert a text, you can do like this.

This is the 3 ^rd time I am telling you the same thing.

H ₂ 0 is essential to life.

This is spanned out text.

You can also insert some <html> code in the middle of a sentence.

Markdown

*this is italicized text* **and some in bold** You can also use _underscore to put emphasis_ instead of using asterisk. Two consecutive underscores can be used to make __some text bold__

Generated HTML Code:

<p><em>this is italicized text</em></p> <p><strong>and some in bold</strong></p> <p>You can also use <em>underscore to put emphasis</em> instead of using asterisk.</p> <p>Two consecutive underscores can be used to make <strong>some text bold</strong></p>

HTML output:

this is italicized text

and some in bold

You can also use underscore to put emphasis instead of using asterisk.

Two consecutive underscores can be used to make some text bold

Note: Markdown supports both asterisk and underscore to make text bold or italicized.

Horizontal Rules

Horizontal rules are not supported by Textile. Markdown allows you to insert a horizontal rule in three ways.

Markdown

*** - - - ---

Generated HTML Code:

<hr /> <hr /> <hr />

Links

Textile

This is how you can "link to LooseStitch(optional title comes here)":https://loosestitch.com using Textile.

Generated HTML code:

This is how you can <a href="https://loosestitch.com" title="optional title comes here">link to LooseStitch</a> using Textile.

HTML output:

This is how you can link to LooseStitch using Textile.

Markdown

If you are using Markdown, and want to create a [link to LooseStitch](https://loosestitch.com/ "Link to LooseStitch"), you need to do things differently.

Generated HTML code:

If you are using Markdown, and want to create a <a href="https://loosestitch.com/" title="Link to LooseStitch">link to LooseStitch</a>, you need to do things differently.

HTML output:

If you are using Markdown, and want to create a link to LooseStitch, you need to do things differently.

Images

Both, Textile and Markdown allow you to create image tags easily. Markdown allows you to specify a title for the image while Textile doesn't have a way to specify the title.

Textile

!images/thumb1.jpg!

Generated HTML code:

<img src="images/thumb1.jpg" alt="" width="100" height="100" />

HTML output:

Markdown

text for image](images/thumb2.jpg "Birds flying in contrast")

Generated HTML code:

<img src="images/thumb2.jpg" alt="alt text for image" title="Birds flying in contrast"/>

HTML output:

Ordered & Unordered Lists

Textile

* item 1 * item 2 ** item 2a ** item 2b * item 3 # item 1 # item 2 ## item 2a ## item 2b # item 3

Generated HTML code:

<ul> <li>item 1 <li>item 2 <ul> <li>item 2a</li> </ul></li> <ul> <li>item 2b</li> </ul></li> </ul> <ul> <li>item 3</li> </ul> <ol> <li>item 1 <li>item 2 <ol> <li>item 2a</li> </ol></li> <ol> <li>item 2b</li> </ol></li> </ol> <ol> <li>item 3</li> </ol>

Markdown

* Popular Markup Languages 1. Markdown 2. Textile * Not so popular ones * Setext * WikiText * etText

Generated HTML code:

<ul> <li>Popular Markup Languages <ol> <li>Markdown</li> <li>Textile</li> </ol></li> <li>Not so popular ones <ul> <li>Setext</li> <li>WikiText</li> <li>etText</li> </ul></li> </ul>

Tables

For those of you who know HTML, you may be jealous of how tables can be created in lightweight markup languages. It is such a pain to create a table in HTML. Textile makes it so simple to generate tables that you will not want to go back to creating tables in HTML. Markdown unfortunately doesn't support table creation.

Textile

|r1c1|r1c2|r1c3| |r2c1|r2c2|r2c3| |r3c1|r3c2|r3c3|

Generated HTML code:

<table> <tr> <td>r1c1</td> <td>r1c2</td> <td>r1c3</td> </tr> <tr> <td>r2c1</td> <td>r2c2</td> <td>r2c3</td> </tr> <tr> <td>r3c1</td> <td>r3c2</td> <td>r3c3</td> </tr> </table>

This article has covered how to use the two most popular lightweight markup languages: Textile and Markdown.

Original: December 15, 2009

Find a programming school near you

Zip Code:

Subject: - Select All Subjects - Computer Applications Computer Engineering Computer Science Computer Prog. - Software Dev. Computer Game Programming Web Design Web Development Internet Systems Internet Certification Database Design and Development Information Systems Management Information Technology Project Management Network Design - Development Systems Analyst

Degree: - Select All Degrees - Associate's Bachelor's Master's Doctoral Certificates Diplomas Coursework MBA

Online Campus Both