[UPDATE 4/12 @ 1:30 p.m. PST] I’ve changed several syntax highlighter plugins because, for some stupid reason, all of my sample HTML code isn’t being read as HTML code samples. I found a decent one, but this one doesn’t show any HTML tags in it. I have contact support for this theme’s internal framework to see why this theme is reading HTML when it shouldn’t with the help of the syntax highlighter plugin or even the code or pre HTML tags. From this point on, I will be using GitHub Gist to embed all my code samples here, but in the case of Markdown, I’ll only replace all my HTML  code samples with Gist.

The Very Basics

Markdown became a popular text-to-HTML syntax in the long run since its first introduction back in 2004 and it is now available on many platforms and is now being supported by many text editors/IDEs for simple, faster text (content) creation. It also has different extensions and versions created by many popular services to provide additional support not originally included in the original Markdown.

Markdown is specifically designed with writers in mind, as well as web developers and programmers who are getting tired and antsy about writing repetitive HTML code (and then have a high chance of making mistakes from forgetting to close HTML tags to typos). With Markdown, you can write faster, cleaner text content for your website or your written piece meant for the web without so much stress and worries of making mistakes.

On this section, we’re going to go through the very basics of Markdown as it was originally created. Alright, here we go!

How about a tool to test these out for us newbies?

Not ready to use Markdown on your projects yet? You can use the following online Markdown text editors and generators to check and see how it works. I recommend starting here first before you start implementing Markdown for your future site projects. I’ll cover that portion in a much later time.

There are plenty more out there not mentioned in this small list. When I was learning Markdown, I used StackEdit to see how it works.

What we will be covering in this section?

These are the very basics of Markdown, therefore, we will be covering the following:

  • Headers
  • Paragraphs and Line Breaks
  • Text Emphasis
  • Blockquotes
  • Let’s put it all together!

Take a look at the sample text below. Let’s write this text for the web looking as we see it:

Here’s a little drabble!

(What the heck is a drabble?)

A drabble is a very quick short fiction written in only about 100 words (or less) in length, according to Wikipedia. It’s a very short version of a flash fiction, so to speak.

An example of a drabble is what we call 55 Fiction.

Can you give us an example of a drabble?

The quick brown fox jumps over the lazy dog?
… or is the wolf simply hungry?

Let’s break this sample blockquote down into pieces:

  • There are three headers in three sizes: Header 1, Header 2, and Header 3. They are the following:
    • Header 1: Here’s a little drabble!
    • Header 2: (What the heck is a drabble?)
    • Header 3: Can you give us an example of a drabble?
  • The following text below are paragraphs:
    • A drabble is a very quick short fiction written in only about 100 words (or less) in length, according to Wikipedia. It’s a very short version of a flash fiction, so to speak.
    • An example of a drabble is what we call 55 Fiction.
  • These words are styled in bold and italic:
    • drabble
    • 55 fiction
  • This is a blockquote:
    • The quick brown fox jumps over the lazy dog?
      … or is the wolf simply hungry?
  • There is a line break between the first and second sentence of the blockquote.

So, how do we write all that using Markdown? Very simple! Let’s start with the headers first.

Headers

There are two types of headers: One they call Setext and atx. The difference between the two is that the Setext style underlines the headers, while the atx style consists of the number of hashtags next to the intended header text.

/* SETEXT style headers only apply to the first two levels of headers (H1 and H2) */

Here's a little drabble!
========================

(What the heck is a drabble?)
-----------------------------

/* You can also write SETEXT style headers this way too */

Here's a little drabble!
==

(What the heck is a drabble?)
-

/* ATX style headers only contain hashtags, based on the header levels */

# Here's a little drabble! /* Header 1 (H1) */
## (What the heck is a drabble?) /* Header 2 (H2) */
### Can you give us an example of a drabble? /* Header 3 (H3) */
#### This is an H4 header.
##### So is this one as H5 header.
###### And the smallest, H6 header.

Both Setext and atx will work for your headers, whichever works for you. The output in HTML will still be the same.

Pretty simple and easy to remember, right? Let’s continue!

Paragraphs and Line Breaks

This is very simple and straightforward. It’s like typing on your keyboard or typewriter. No special characters required.

/* Markdown paragraphs and line breaks below */

A drabble is a very quick short fiction written in only about 100 words (or less) in length, according to Wikipedia. It’s a very short version of a flash fiction, so to speak.
/* press ENTER twice */
An example of a drabble is what we call 55 Fiction.

/* Markdown line breaks here */
The quick brown fox jumps over the lazy dog? /* press ENTER once* /
… or is the wolf simply hungry?

The HTML output would be the following below:

Text Emphasis

How do you make a word or a phrase or a sentence be bold or italic? In Markdown, we use underscores _ or asterisks *. Using either one of the two is just a matter of preference, but it is also important to be consistent with what special character you’re using for a much easier, cleaner syntax.

On the same text that we used for the paragraphs and line breaks example, we have a word that is bold (drabble) and in italic (55 Fiction), so let’s write these using Markdown.

/* Here's how to make your text "drabble" bold using asterisks - use 2 asterisks at the front and end of a word or phrase */

A **drabble** is a very quick short fiction written in only about 100 words (or less) in length, according to Wikipedia. It's a very short version of flash fiction, so to speak.

/* And here's the same thing using 2 underscores! */

A __drabble__ is a very quick short fiction written in only about 100 words (or less) in length, according to Wikipedia. It's a very short version of flash fiction, so to speak.

/* Here's how to make "55 Fiction" Italic. It's very easy using just one asterisk! */

An example of a drabble is what we call *55 Fiction*.

/* ... and the same goes with just one underscore */

An example of a drabble is what we call _55 Fiction_.

Whether you use asterisks or underscores, the HTML output is still the same.

Blockquotes 

The final paragraph of our example is a blockquote. In Markdown, it’s the same as quoting text when you write email (as in writing replies to the original email). We use the greater than sign > for every line break or paragraph break of the text.

For instance, there is a line break between the two sentences in the final paragraph, so therefore, we also need to add a > on the second line or paragraph too, like this:

/* Quote this passage with blockquotes--- Markdown style! */

> The quick brown fox jumps over the lazy dog?
> ... or is the wolf simply hungry?

The HTML output would be the following:

You can also nest another blockquote within a blockquote by adding another > next to it. For example:

/* Nest a text in a blockquote with another blockquote! */

> The quick brown fox jumps over the lazy dog?
> > ... or is the wolf simply hungry?

In which the HTML output would be:

Let’s put it all together! 

Going back to our sample text from the beginning of this section, we’ll put the Markdown that we’ve learned to create that text style.

Again, the headers and other optional usages mentioned above are a matter of preference.

# Here’s a little drabble!
## (What the heck is a drabble?)

A **drabble** is a very quick short fiction written in only about 100 words (or less) in length, according to Wikipedia. It’s a very short version of a flash fiction, so to speak.

An example of a drabble is what we call *55 Fiction*.

### Can you give us an example of a drabble?
> The quick brown fox jumps over the lazy dog?
> … or is the wolf simply hungry?

There is more to the very basics than the ones above, but I think this would be it for the time being. Please stay tuned for more!