Menu

Markdown for Writers and Hobbyists (Part 2)

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 and CSS 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.

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.

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.

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.

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:

The HTML output would be the following:

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

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.

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!