Introduction
Markdown was made by John Gruber, and he says:
“Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML)”.
Let’s take a look on how it works by the example I made on Codepen. The text on the left is writing in Markdown syntax and the output is on the right. You can play around by changing the text:
See the Pen simple Markdown editor with Vuejs & Marked by Trung Ho (@leetrunghoo) on CodePen.
Yeah, that’s so simple, isn’t it? 
If you write in HTML, it could be like this:
<h2>Introduce myself</h2>
<h3>My name is Trung.</h3>
<p>I'm <em>friendly</em>, <strong>funny</strong> and <del>fucking</del> <em><strong>handsome</strong></em> 😎</p>
<p>I like:</p>
<ul>
<li>Learning new things.</li>
<li>Making new friends.</li>
<li>Playing the guitar and the piano.</li>
</ul>
<hr>
<blockquote>
<p>"Find your passion and find a way to get paid for it." - someone said 😋</p>
</blockquote>
An advantage of writing content with Markdown is that it is free from the angle brackets and tags used in HTML, so it feels and looks more like “content” than “code”. You can even write HTML code in a Markdown file. It is lightweight and superb easy to use therefore you don’t need any WYSIWYG editor plugin. Markdown is a great choice when you focus on creating web content like blog or news.
Who are using it? A lot, including Github and Stackoverflow.
GitHub uses Markdown with adding a few unique writing features for styling all forms of writing, called GitHub Flavored Markdown and the next part of this blog is about its cheatsheet.
Markdown Cheat Sheet
- Headers
- Paragraphs
- Emphasis
- Blockquotes
- Links
- Images
- Lists
- Code and Syntax Highlighting
- Table
- Horizontal Rule
- Mentions
- Task Lists
- Emoji
- Ignoring Markdown formatting
Headers [back to list]
# Level 1 Header (H1)
## Level 2 Header (H2)
##### Level 5 Header (H5)
Level 1 Header (H1)
Level 2 Header (H2)
Level 5 Header (H5)
Paragraphs [back to list]
One or more consecutive lines of text separated by one or more blank lines.
This is another paragraph.
One or more consecutive lines of text separated by one or more blank lines.
This is another paragraph.
To create a line break,
end a line in a paragraph with two or more spaces.
To create a line break,
end a line in a paragraph with two or more spaces.
Emphasis [back to list]
**bold text**, __bold text__, *italic text*, _italic text_, ~~Strikethrough~~
bold text, bold text, italic text, italic text, Strikethrough
Blockquotes [back to list]
> "Trung, you look like an famous actor!"
> - someone said
“Trung, you look like an famous actor!”
- someone said
Links [back to list]
<https://leetrunghoo.com>
[This is my website](https://leetrunghoo.com)
[Link with title](https://leetrunghoo.com "my website")
[Open link in new tab](https://leetrunghoo.com "click to open in new tab"){:target="_blank"}
Jump to the specified anchor point on the same page, [to the top](#top)
This is [an example][id] reference-method link.
[id]: https://leetrunghoo.com
https://leetrunghoo.com
This is my website
Link with title
Open link in new tab
Jump to the specified anchor point on the same page, to the top
This is an example reference-method link.
Images [back to list]
The syntaxt is almost the same with Links, just adding ! at the beginning.
Lists [back to list]
- Create a list by starting a line with `+`, `-`, or `*`
- Sub-lists are made by indenting 2 spaces:
- Marker character change forces new list start:
* Ac tristique libero volutpat at
+ Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Ordered
1. Number 1
2. Number 2
1. Number 3
- Create a list by starting a line with
+,-, or* - Sub-lists are made by indenting 2 spaces:
- Marker character change forces new list start:
- Ac tristique libero volutpat at
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Marker character change forces new list start:
- Ordered
- Number 1
- Number 2
- Number 3
Definition lists
Apple
: A kind of fruit
: A computer company
- Apple
- Pomaceous fruit of plants of the genus Malus.
- An american computer company.
Term 1
Term 2
: Definition
- Term 1
- Term 2
- Definition
Code and Syntax Highlighting [back to list]
Inline `code`
Inline code
You can create a standard block code by a tab space or “fences”
```
Sample text here...
```
Output:
Sample text here...
For syntax highlighting, write the language name after ```
```js
var foo = function (bar) {
return bar++;
};
console.log(foo(5));
```
Output:
var foo = function (bar) {
return bar++;
};
console.log(foo(5));
Another way to present syntax highlighting is using Liquid
{% highlight js linenos %}
// "linenos" argument for including line numbers
var foo = function (bar) {
return bar++;
};
console.log(foo(5));
{% endhighlight %}
Output:
1
2
3
4
5
// `linenos` argument for including line numbers
var foo = function (bar) {
return bar++;
};
console.log(foo(5));
Table [back to list]
Colons can be used to align columns.
| Tables | Are | Cool |
| -------- |:-------------:| -----:|
| col 3 is | right-aligned | $10 |
| col 2 is | centered | $12 |
| last row | ... | $1 |
| Tables | Are | Cool |
|---|---|---|
| col 3 is | right-aligned | $10 |
| col 2 is | centered | $12 |
| last row | … | $1 |
There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don’t need to make the raw Markdown line up prettily. You can also use inline Markdown.
Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3
| Markdown | Less | Pretty |
|---|---|---|
| Still | renders |
nicely |
| 1 | 2 | 3 |
Horizontal Rule [back to list]
There are 3 ways to write a horizontal rule
---
***
___
Mentions [back to list]
Typing an @ symbol, followed by a username, will notify that person to come and view the comment. Ex: Hey @leetrunghoo - like your blog
Task Lists [back to list]
- [x] This is a complete item
- [ ] This is an incomplete item
Note: this just work when viewing .md file on github website, for example README.md. Another way (less pretty) is using HTML markup.
<input type="checkbox" disabled="disabled" checked="checked"> This is an complete item
<input type="checkbox" disabled="disabled"> This is an incomplete item
Output:
This is an complete item
This is an incomplete item
Emoji [back to list]
GitHub Flavored Markdown supports Emoji 
Let’s check out the Emoji Cheat Sheet.
Ignoring Markdown formatting [back to list]
Last but not least, you can tell GitHub to ignore (or escape) Markdown formatting by using \ before the Markdown character.
Let's rename \*our-new-project\* to \*our-old-project\*.
Let’s rename *our-new-project* to *our-old-project*.
Reference:
About me