Site Navigation

Jun 20, 2013

Markdown Quick Start

HTML5 Logo

What is Markdown?

Markdown is a stand alone text markup language created by John Gruber and designed for quickly creating HTML content. Think of it like a wiki markup language without the wiki.

If you write a lot of HTML content in the form of blog posts or web sites, Markdown can save you a lot of time. All the basic tags and HTML constructs like paragraphs (<p>) and headers (<h4>) are generated for you. So as a tool, it can be used by noobs or advanced users.

What does it look like?

Well since this article was written in Markdown, here is a sample:

#### What is Markdown?

[Markdown is a stand alone text markup language created by John Gruber](http://daringfireball.net/projects/markdown/) and designed for quickly creating HTML content. Think of it like a wiki markup language without the wiki.

If you write a lot of HTML content in the form of blog posts or web sites, Markdown can save you a lot of time. All you basic tags and HTML constructs like paragraphs (<p>) and headers (<h4>) are generated for you. So as a tool, it can be used by noobs or advanced users.

#### What does it look like?

Well since this article was written in Markdown, here is a sample:

* You can see that bullet lists are created using asterisks 
* Headers are created using the # sign. One # for each HTML header level
* Links are created by surrounding the link text using brackets [ ] followed by the URL in parentheses. 
  • You can see that bullet lists are created using asterisks
  • Headers are created using the # sign. One # for each HTML header level
  • Links are created by surrounding the link text using brackets [ ] followed by the URL in parentheses.

What about the HTML? What is generated? Here is what that looks like:

   1 
   2 <h4>What is Markdown?</h4>
   3 
   4 <p><a href="http://daringfireball.net/projects/markdown/">Markdown is a stand alone text markup language created by John Gruber</a> and designed for quickly creating HTML content. Think of it like a wiki markup language without the wiki.</p>
   5 
   6 <p>If you write a lot of HTML content in the form of blog posts or web sites, Markdown can save you a lot of time. All you basic tags and HTML constructs like paragraphs (&lt;p&gt;) and headers (&lt;h4&gt;) are generated for you. So as a tool, it can be used by noobs or advanced users.</p>
   7 
   8 <h4>What does it look like?</h4>
   9 
  10 <p>Well since this article was written in Markdown, here is a sample:</p>
  11 
  12 <ul>
  13 <li>You can see that bullet lists are created using asterisks </li>
  14 <li>Headers are created using the # sign. One # for each HTML header level</li>
  15 <li>Links are created by surrounding the link text using brackets [ ] followed by the URL in parentheses. </li>
  16 </ul>
  17 

How do you get from text to HTML?

Write your text using Markdown syntax.

Then, use a Markdown processor to convert your text into HTML. Many Markdown editors have a processor built in. There are also many stand alone processors for a number of programming languages.

Markdown Tools

So what tools can I use to get started?

Editors with Built in Preview

These tools have an editor, processor and previewer all in one tool.

Markdown Pro (Mac)
Markdown Pad (Windows)

Editors

These are editors which have Markdown features but may or may not have a processor/previewer built in.

Textastic (Mac)
Sublime Text 2 (Mac, Windows, Linux)

Processors

Stand alone processors for Markdown

markdown (Perl)
Marked (Mac)
kramdown (Ruby)
markdown4j (Java)

Post a Comment

Favorite Links Feed