Markdown 101

Reason: it's awesome and you should learn it. Ha! But really, all the varying markup on copy that comes from Word, Keynote, Gmail, Photoshop, etc - it's a bad mix. A lot of the time, we just need the copy.

Markdown allows you to work with text and include only the good parts of its intended formatting. Utilizing Markdown alleviates the pain and gets the writer accustomed to the skeleton of their copy. The mark up is whatever CSS or styling is attributed to those pieces once converted into HTML.

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML). -- readwrite web

It's the gateway into plain text and html. And, the clarity it provides will make all our lives easier for the technical and nontechnical.

Uses:

  • Evernote - MD or html. Save and be able to utilize the copy anywhere.
  • Web admin editors are moving to it. I.e., ExpressionEngine, ghost, flask, etc.
  • Gmail - html
  • Redbooth - paste the MD in convos and html in notes - this one is an oddball.
  • Slack - MD
  • Github - all the readmes are MD

Exercise and Do It

Couple of options:

  • Install the general purpose macdown.
  • A hackable text editor, atom.
  • Use the collaborative web editor fiddle like this.

Start using it and make a page. And, begin.

I'm going to write several winning examples. Btw, this post is written in markdown. Each encapsulated bits of markdown not converted to html in the post between two sets of three tildas then copy and pasted outside the code blocks. Only markdown was used to write this post in the web editor of this very website. Here goes:

# heading 1
## heading 2
### heading 3

Two breaks and you have a paragraph  

renders as:

heading 1

heading 2

heading 3

Two breaks and you have a paragraph

Unordered list:

- list item one
- list item two
- list item three. Yay!

turns into:

  • list item one
  • list item two
  • list item three. Yay!

Ordered list:

1. numbered list  
2. another item  
3. three is my favorite number!  

does exactly that:

  1. numbered list
  2. another item
  3. three is my favorite number!

What about links and other html elements? Great question!

Links are made like this with either, a simple inline link <http://i.imgur.com/eoWBPmV.jpg> or an inline link with descriptive link text [Morpheus](http://i.imgur.com/eoWBPmV.jpg).

An inline image is like a link, but uses an exclamation point: ![Morpheus](http://i.imgur.com/eoWBPmV.jpg)

Markdown is html friendly. You can add html anywher like <span style="color:red; text-transform:uppercase">this</span>.  

Links are made like this with either, a simple inline link http://i.imgur.com/eoWBPmV.jpg or an inline link with descriptive link text Morpheus.

An inline image is like a link, but uses an exclamation point: Morpheus

Markdown is html friendly. You can add html anywher like this.

Obviously, this exercise doesn't cover all use cases and, if this is your first time, you'll need to use it again to get the hang of it. There is a lot more it can do. For more markdown uses, refer to the help file or go to the makers of markdown at http://daringfireball.net/projects/markdown/basics.

Have fun!

This is a first in a series of, hopefully many, lunch and learns where we are bringing snackable and helpful things to learn to the table. 'Sides presenting, I had a Jimmy John's #5 Vito. It was gud.