Markdown is a lightweight markup language that allows you to write documents using an easy-to-read and easy-to-write plain text format. This guide will introduce you to various Markdown syntax elements to help you quickly master this powerful documentation tool!

1. What is Markdown?

Markdown was created by John Gruber in 2004 with the goal of being “easy to read and easy to write.” It uses simple syntax to format text, which can then be converted to HTML or other formats.

2. Basic Syntax

2.1 Headers

Use the # symbol to create headers, supporting levels 1-6:

Syntax Example:

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Rendered Result:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

2.2 Text Formatting

  • Bold text: Use **text** or __text__
  • Italic text: Use *text* or _text_
  • Bold and italic: Use ***text***
  • Strikethrough: Use ~~text~~
  • Inline code: Use backticks

2.3 Lists

2.3.1 Unordered Lists

Create using -, *, or +:

Syntax Example:

- Item 1
- Item 2
  - Sub-item 2.1
  - Sub-item 2.2
- Item 3

Rendered Result:

  • Item 1
  • Item 2
    • Sub-item 2.1
    • Sub-item 2.2
  • Item 3

2.3.2 Ordered Lists

Use numbers followed by a period:

Syntax Example:

1. First item
2. Second item
   1. Sub-item 2.1
   2. Sub-item 2.2
3. Third item

Rendered Result:

  1. First item
  2. Second item
    1. Sub-item 2.1
    2. Sub-item 2.2
  3. Third item

Syntax Example:

[Link text](URL "Optional title")
[GitHub](https://github.com "The world's largest code hosting platform")

Rendered Result: GitHub

2.4.2 Images

Syntax Example:

![Alt text](Image URL "Optional title")
![Sample image](https://via.placeholder.com/150x100/4CAF50/FFFFFF?text=Markdown "Sample image")

Rendered Result: Sample image

2.5 Blockquotes

Use > to create blockquotes:

Syntax Example:

> This is a blockquote.
> 
> It can contain multiple paragraphs.
> 
> > This is a nested quote.

Rendered Result:

This is a blockquote.

It can contain multiple paragraphs.

This is a nested quote.

2.6 Code Blocks

2.6.1 Inline Code

Syntax Example:

Use backticks: `console.log('Hello World')`

Rendered Result: Use backticks: console.log('Hello World')

2.6.2 Code Blocks

Syntax Example:

```javascript
function greet(name) {
    console.log(`Hello, ${name}!`);
}

greet('Markdown');
```

```python
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print(fibonacci(10))
```

Rendered Result:

function greet(name) {
    console.log(`Hello, ${name}!`);
}

greet('Markdown');

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print(fibonacci(10))

3. Advanced Syntax

3.1 Tables

Syntax Example:

| Syntax | Description | Example |
|--------|-------------|---------|
| `**text**` | Bold | **Bold text** |
| `*text*` | Italic | *Italic text* |
| `~~text~~` | Strikethrough | ~~Deleted text~~ |
| `` `code` `` | Inline code | `console.log()` |

Rendered Result: | Syntax | Description | Example | |——–|————-|———| | **text** | Bold | Bold text | | *text* | Italic | Italic text | | ~~text~~ | Strikethrough | Deleted text | | `code` | Inline code | console.log() |

3.2 Horizontal Rules

Syntax Example:

Use three or more `-`, `*`, or `_`:

---

Rendered Result: Use three or more -, *, or _:

3.3 Task Lists

Syntax Example:

- [x] Completed task
- [ ] Incomplete task
- [x] Another completed task

Rendered Result:

  • Completed task
  • Incomplete task
  • Another completed task

3.4 Footnotes

Syntax Example:

Here's a footnote[^1] and another one[^note].

[^1]: This is the first footnote content.
[^note]: This is the named footnote content.

Rendered Result: Here’s a footnote1 and another one2.

4. Extended Syntax

4.1 Math Formulas

Syntax Example:

Inline formula: $E = mc^2$

Block formula:
$$
\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n
$$

Rendered Result: Inline formula: $E = mc^2$

Block formula: $ \sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n $

4.2 Highlighted Text

Syntax Example:

==Highlighted text== (supported by some editors)

Rendered Result: ==Highlighted text== (supported by some editors)

4.3 Superscript and Subscript

  • Superscript: x^2^
  • Subscript: H~2~O

5.1 Editors

  • Typora: WYSIWYG Markdown editor
  • Mark Text: Open-source editor with live preview
  • Visual Studio Code: With Markdown plugins
  • Obsidian: Knowledge management and note-taking tool

5.2 Online Tools

  • Dillinger: Online Markdown editor
  • StackEdit: Feature-rich online editor
  • Markdown Live Preview: Real-time preview tool

  1. This is the first footnote content. ↩

  2. This is the named footnote content. ↩