Markdown Notes

Markdown is very useful in GitHub readme files, Jupyter Notebooks, blogs, wikis, and other applications in the web.

It is a simple way to provide format to documentes, and simpler than formating a traditional web page with html, css, and also it can be converted to HTML very easily.

You can use any text editor to write markdown, but there are useful tools to see inmediately the results of your markdown, for example if you use Chrome as web browser, you can add the app Minimalist Markdown. Another example if you use VS Studio you can add the extension Auto-Open Markdown Viewer.

I do not intend to present all Markdown options (although I plan to improve it), only some usefull ones, but I encourage anyone reading to explore other tutorials, see markdown files form diverse sources and explore the code, and use it in your own mardown files, it is really fun.

I have divided this tutorial in several sections. Each part shows an example of how is seen in the browser, and the in the code.

---

Contents

• Header options
• Formating text options
• Quoting text
• List options
• Task list
• Formating a table
• Adding links
• Adding images
• Adding videos
• Including code
• HTML options
• Terminology
• Additional references

---

Header options

Headers are ussually the first thing you type at the begining of your document. There are several size options dependind on the number of # (hashtags) you type before the text (from 1 to 6). In this example I only show the first three options.

Header size 1

Code example:

# Header size 1

Header size 2

Code example:

## Header size 2

Header size 3

Code example:

### Header size 3

---

Text options

Formating text is very important, to highlight or differentiate from the rest of the text. Two common options are to use the single characters _ or * for italic text or to use the same characters but double for bold text.

Italic text

Code example:

_Italic text_

Bold text

Code example:

__Bold text__

---

Quoting text

Quoting text is also very common when you want to highligh text from a different author, or copying something from a different source.

“Don’t let the noise of others’ opinions drown out your own inner voice.” ― Steve Jobs

Code example:

> “Don’t let the noise of others’ opinions drown out your own inner voice.”           
>                           ― Steve Jobs

---

Lists options

Listing data is also a comon way to organize objects or elements in a document. You can use -, +, or * characteres

Example using -:

• list element
• list element

Code example:

- list element
- list element

And if you want to use number your elements in a list is very simple.

Numbered lists:

1. numbered element
2. numbered element

Code example:

1. numbered element
2. numbered element

Combing lists (sublists)

• list element
  • hello
  • world
• list element

Code example:

- list element
    + hello
    + world
- list element

• list element
  1. hello
  2. world
• list element

Code example:

- list element
    1. hello
    2. world
- list element

Task list

Lists can also be useful to specify if a task has been completed or not.

• element completed
• element not completed

Code example:

- [x] element completed
- [ ] element not completed

---

Table format

Creating a table is very easy in markdown, and very useful to organize information when lists are not enough.

Android	iOS	Windows
Facebook	Instagram	Twitter
Hotmail	Yahoo	Gmail

Code:

Android | iOS | Windows
--- | --- | ---
Facebook | Instagram | Twitter
Hotmail | Yahoo | Gmail

---

Adding links

Adding links is very important and not only to add external resources, also to roganize the content of your document.

Google

Code example:

[Google](http://www.google.com)

---

Adding images

Adding images if you want to provide graphics.

Code example:

![Markdown](https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/312px-Markdown-mark.svg.png
 "Markdown logo")

---

Adding videos

I do not have a video of my own yet, but you can add any video available on the internet with this format. In the meantime I have included a Mardown video by Traversy Media.

Code example:

[![Markdown Crash Course](https://img.youtube.com/vi/HUBNt18RFbo/default.jpg)](https://youtu.be/HUBNt18RFbo)

A special note here when adding Youtube videos. The format is:

[![Video description](https://img.youtube.com/vi/<video id>/<default.jpg or 0.jpg will be enough>)](https://youtu.be/<video id>)   

Including code

Adding code is very common if you are related to software programming or devops.

For one line code we use a single back quote (backtick) at the beggining and end of the code: single line of code

For block of code we triple back quotes at the begining and end of the code:

import math
def func():
   for if

We can specify the code type to include some code formating, for example in this case we specify python after the first three back quotes:

import math
def func():
   for if

HTML Options

You can use some html formating options. For example you can add coments in your files the same way than in html files. Of couse the comments are not going to be seen on the browser, only your editor.

Code example:

<!-- This is a comment -->

Also you can add headers in HTML format.

Hello world

Code example:

<h3>Hello world</h3>

---

Terminology

---

Additional references

Markdown on Wikipedia.

What is Markdown? by Codecademy.

Markdown Crash Course by Traversy Media.

---