[EN][TIPS] Basics About MarkDown


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

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

// Write checkbox

  • Un-Checked Checkbox
  • 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
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
eg) \*Text\*

* Escaping "|" in tables does not work in table, it can be written with "|"
Quotation > Text Sets quotation
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
Spaces and symbols will be shown as raw text
Codes `Text` Shows texts as inline codes
Used to show code within the line
Links <URL> Creates link like this http://qiita.com
Links [Text] (URL> Creates link like this Link
Image ![Alt Text] (ImagePath) Shows image
"Alt Text" is shown if failed to show image
Horizontal Line --- Sets horizontal line
List - Text
or
* Text
or
+ Text
Show text as list
Indents can be put with tabs
Numbered List 1. Text Show text as numbered list
Indents can be put with tabs
Checkbox List - [ ] Unchecked Checkbox
- [x] Checked Checkbox
Show checkbox list
Table | TopicA | TopicB |
| --- | ---- |
| ContentA | ContentB |
Shows table
Align of text can be arranged by placing ":" in second line
Align left: ":---"
Align Right: "---:"
Align Center: ":---:"