leetrunghoo

What is Markdown?

by Trung Ho — Posted in Tech on

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? :smile: 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

  1. Headers
  2. Paragraphs
  3. Emphasis
  4. Blockquotes
  5. Links
  6. Images
  7. Lists
  8. Code and Syntax Highlighting
  9. Table
  10. Horizontal Rule
  11. Mentions
  12. Task Lists
  13. Emoji
  14. 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

<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.

![Alt text](/assets/img/avatar/trungho.jpg "Trung Ho")

Alt text


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
  • Ordered
    1. Number 1
    2. Number 2
    3. 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 :+1: :smile: :heart: 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:




Share this blog