[EN][TIPS] Basics About MarkDown

When using Qiita & GitHub, and many others, it is always good to know how to write MarkDown :slight_smile: 

So, lets start.

# What is MarkDown?
 - In a very rough way, MarkDown allows us to write decorative articles easily.
 - Basically MarkDown is something that can be written easier than HTML, and is rather similar to writing an e-mail.


# How to write MarkDown
 - We can write MarkDown, by writing some symbols before, or around the text.
 - See the following for some quick examples

**How the code looks like**

```
// Write list

 - This is how we write lists

// Wrile link with text

[Qiita](http://qiita.com)

// Write checkbox

 - [ ] Un-Checked Checkbox
 - [x] Checked Checkbox 

// Write table
// Aligning left/center/right is set with ":" in second line

|Left|Center|Right|Default|
|:---|:----:|:----|-------|
|1   |     2|    3|4      |
|   5|  6   |7    |      8|
```

**How the above code looks like in actual page**

// Write list

 - This is how we write lists
 
// Wrile link with text

[Qiita](http://qiita.com)

// Write checkbox

 - [ ] Un-Checked Checkbox
 - [x] Checked Checkbox 

// Write table
// Aligning left/center/right is set with ":" in second line

|Left|Center|Right|Default|
|:---|:----:|:----|-------|
|1   |     2|    3|4      |
|   5|  6   |7    |      8|

# MarkDown Chart
 - So now, here is the quick chart of how to write MarkDown
 - Keep in mind ONLY SOME BITS are written here. For more, please research yourself :yum:

| About | How To Write In MarkDown | Detail / Tips |
| --- | --- | --- | 
| Headers | `# Text` | Size of Header will differ by number of "#" |
| Paragraph | (Place a empty line in between 2 lines) | Sets paragraph for texts |
| New Lines | (Place 2 spaces at the end of line) | Sets new line |
| Escape Symbol | `\` | Escapes symbols to be used as MarkDown <br> eg) `\*Text\*` <br><br> * Escaping "&#124;" in tables does not work in table, it can be written with "`&#124;`"  |
| Quotation | `> Text` | Sets quotation <br> Can write multiple quotation by adding ">" |
| Italic | `*Text*` | *Makes text italic* |
| Bold | `**Text**` | **Makes text bold** |
| Slash | `~~Text~~` | ~~Makes slash text~~ |
| Codes |``````Text``` ``` | Shows texts as codes <br> Spaces and symbols will be shown as raw text |
| Codes | ````Text` ``` | Shows texts as inline codes <br> Used to show code within the line |
| Links | `<URL>` | Creates link like this <http://qiita.com> |
| Links | `[Text] (URL>` | Creates link like this [Link] (http://qiita.com) |
| Image | `![Alt Text] (ImagePath)`| Shows image <br> "Alt Text" is shown if failed to show image |
| Horizontal Line | `---` | Sets horizontal line |
| List | `- Text` <br> or <br> `* Text` <br> or <br> `+ Text` | Show text as list <br> Indents can be put with tabs |
| Numbered List | `1. Text` | Show text as numbered list <br> Indents can be put with tabs |
| Checkbox List | ` - [ ] Unchecked Checkbox` <br> ` - [x] Checked Checkbox`  | Show checkbox list |
| Table | &#124; TopicA &#124; TopicB &#124; <br> &#124; --- &#124; ---- &#124; <br> &#124; ContentA &#124; ContentB &#124; | Shows table <br> Align of text can be arranged by placing ":" in second line <br> Align left: ":---" <br> Align Right: "---:" <br> Align Center: ":---:" |