How to Create HTML Documents Using Plain Text
Posted 01/24/2012 at 2:14pm
| by Cory Bohon
The Markdown editor is an easy way to instantly turn your plain text documents into nicely formatted HTML, all without having any actual knowledge of coding. Read on to find out how!
What You'll Need:
>> Typing skills
>> Mou markdown editor (free, in beta)
Getting Started with Markdown
The Markdown syntax may be very similar to you if you have ever used wiki syntax (on Wikipedia, or another wiki). We'll cover the basics of marking up a document with Markdown, but if you want to see all of the features, check out Daring Fireball or the Wikipedia entry.
The Basic Syntax of Markdown
Let's cover some of the basic syntax when using Markdown to create a document.
Paragraphs
This is the beginning of a normal paragraph. This is the second
sentence in our first paragraph.
This is the beginning of a second paragraph. Note the one
blank line separating the two paragraphs.
To create a normal paragraph, simply use one or more blank line to separate blocks of text.
Text Emphasis
*This is italicized text*
**This is boldface text**
You can also create emphasized text (either bold or italics). To italicize text, use a single asterisk at the beginning of the italicized text, and one at the end. To boldface text, use two asterisks. You can optionally replace the use of the asterisks with underscores (eg. __boldface__ or _italics_)
Unordered Lists
*First item
*First subitem
*Second subitem
*Second item
To create an unordered (bulleted) list, use an asterisk to denote an item, and a tab with another asterisk to denote a subitem underneath the main item.
Ordered Lists
1. Item one
2. Item two
3. Item three
To create an ordered (numbered) list, use numerals and a period after the numeral.
Headings
#First Heading
##Second Heading
###Third Heading
####Fourth Heading
Headings can be used by placing pound (or number signs) in front of the text that you wish to make a heading. The ranking of the heading will be determined by the number of number signs in front of the text, up-to 6 levels of headings as supported by HTML. The first an second level headings can optionally be written with either equals signs under them (for first-level headings) or dashes (for second-level headings).
First-level heading
===================
Second-level heading
--------------------
Block Quotes
>This paragraph will appear in the exported HTML document as a block quote. Markdown will handle the rest for you.
To create a block quote in Markdown, simply place a greater-than sign in front of the paragraph that you wish to make a block quote.
Links
[Link text](http://maclife.com "Link hover text here")
To create a link in your Markdown document, use the above syntax. In the brackets before the link, place the text that will appear in your document. Inside the parenthesis, place the link without quotes, followed by a space and the text that will appear when the link is hovered over.
Writing Your Markdown Document

Using the above syntax, open Mou (or another Markdown editor of your choosing), and type your document in the left-hand side of the editor. A live preview will appear in the right-hand side of the window as you type. When you save your document, it will be saved in the ".md" format (or Markdown format).
Exporting Your Document as HTML

When you are ready to export your document to HTML, click File > Export HTML (or press Command + E). A save dialog will appear. Type in the file name you desire, and then click the "Export HTML" button.

You can then open the document in your web browser to see the HTML document, formatted nicely, with very little effort. Pretty nifty, eh?
Follow this article's author, Cory Bohon on Twitter.