BASIC OF MARKDOWN

Introduction to Markdown

Abdirahman Mohamed

works @ TecKave

I’m a self-taught developer and designer, Traveller, Enthusiast chef and a people person.

Published: October 06, 2019 Time: 6 min read

Basics of Markdown

It’s no secret that we’re big fans 💞 of Markdown at Teckave. We write our blog posts entirely in Markdown.

Once you get the hang of Markdown, it’s an incredibly powerful writing tool which will allow you to write rich content for the web far faster than almost any other method. To get to that point, there’s a little bit of a learning curve.

We thought we’d put together a guide to make that curve a little bit shorter, and potentially teach me and you a few super hacks and tricks.

Note, I am learning with you on this journey and to be honest am excited ✨ so let’s get our hands dirty with markdown 🤘.

What is Markdown?

Before we get to the nerdy and technical definition of markdown, we both know that sh** is boring 😪 let’s talk about HTML, the programming language which we can hack NASA with 😜.

Meme

Jokes aside markdown is HTML without the tags.

Now lets introduce Markdown probably.

Markdown is a plain text formatting syntax for writers. It allows you to quickly write structured content for the web, and have it seamlessly converted to clean, structured HTML.

Back in 2004, Apple pundit John Gruber came up with the idea after becoming frustrated by writing long, laborious HTML tags to properly format his content. He devised a simple writing system which would make web based documents both easier to write, and easier to read in their raw state.

Here’s a quick example of Markdown in action:

If  [Internet Explorer](https://www.microsoft.com/en-us/download/internet-explorer.aspx)
is brave enough to ask to be your **default browser**,
You are brave enough to ask that *girl* out.

becomes

” If Internet Explorer is brave enough to ask to be your default browser, You are brave enough to ask that girl out 😏. ”

With just a couple of extra characters, Markdown makes rich document formatting quick and beautiful. Infact this entire post is written in Markdown.

Basic Markdown Formatting

Ok! You’re sold 🙌. So how does this work? Let’s Learn together.

Markdown was designed with the explicit intention to be easily readable by humans. You should find that most of the syntax is pretty simple and easy unless you are an alien 😱.

Below we have specified all the basic elements you’ll use most often:, this will also be our reference for the future because after all we are dumb creatures and we forgot a lot, don’t pretend that you ain’t dumb 😏.

Headings

Headings in Markdown are any line which is prefixed with the # symbol. The number of hashes indicates the level of the heading. One hash is converted to an header1, two hashes to an header2 and so on. There are 6 levels of headers that you can make use of - but let’s be honest here for most writing, you’ll rarely ever need more than 3.

# Heading 1
## Heading 2
### Heading 3

this becomes

Heading 1

Heading 2

Heading 3


Text

If you want a word to be italic, wrap it in asterisks. Making a word bold doesn’t take that much too, just double the asterisks. bold-italic statements John Wick style 🔫, use triple asterisks.

*italic*
**bold**
***bold-italic***

NOTE: If you prefer, you can also use underscores - they’re completely interchangeable.


Links

Links can be either inline with the text, or placed at the bottom of the text as references. Link text is enclosed by square brackets [], and for inline links, the link URL is enclosed by parens ().

[Tekcave](https://teckave.com/)

becomes

Tekcave

Lists

Lists are a formatting nightmare in HTML Meme

but Markdown lists are incredibly easy to manage. For a bullet list, just prefix each like with a * and they will be converted to dots.

* Milk
* Bread
    * Rice
* Meat

becomes

  • Milk 🐮
  • Bread 🍞

    • Rice 🍚
  • Meat 🍖

For nested lists; just indent a line with 4 spaces and it will be nested under the line above. You can also create numbered lists, do exactly the same thing but use numbers instead of the single start e.g

  1. Milk.
  2. Bread
  3. Meat

Quotes

When you want to add a quote in Markdown, it’s extremely easy I mean soo easy that you would lough at this, I mean its ridiculous its made with single character '>'

Meme

> I want someone to look at me the same I look at my tea

I want someone to look at me the same i look at my tea 😢

Images and Gifs

Markdown images and gifs have exactly the same formatting as a link, except they’re prefixed with exclamation mark '!'. Another markdown magic✨

![magic](https://media.giphy.com/media/NmerZ36iBkmKk/giphy.gif)

becomes

magic

now lets answer the big question that I think you have in mind 😎!

What are the Best Markdown Apps?

Although you can write markdown in any basic text editor and then export it later into HTML you need to preview your document first and Here are some of our three favorite Markdown editors, Simple Note, Visual Studio Code and Ghost Writer

Conclusion

“Is that it?” - I hear you ask - “I could just click on a few formatting buttons in most editors and achieve the same thing!”

magic

While most beginner users do indeed find buttons a bit easier to use, advanced writers often write with Markdown and nothing else. Why? The biggest reason is writing flow.

Using a traditional writing user interface e.g ‘Microsoft Word’ you have to pause your writing every few minutes (or sometimes seconds) and reach for the mouse in order to click, highlight, click a formatting button, and then click back to where you left off in order to continue. This process is just dumb, all we want to do is get the words out of our head and onto the screen.

After just a couple of hours with Markdown, we’re certain that your fingers will be flying across the keys as you write your greatest document.

Lets Start

I hope that we enjoyed learning markdown together, and don’t forget this is just a basic introductory to markdown.

We will publish an advanced markdown blog post which we will be able to use the big guns of markdown, Stay Tuned.

Share on LinkedIn
Share on Whatsapp