HookedLee
中文

Complete Markdown Syntax Guide

This is a comprehensive guide to all Markdown syntax elements. Each section includes the syntax and its rendered output.

Table of Contents

  1. Headings
  2. Paragraphs
  3. Line Breaks
  4. Emphasis
  5. Lists
  6. Links
  7. Images
  8. Blockquotes
  9. Code
  10. Horizontal Rules
  11. Tables
  12. Task Lists
  13. Escaping Characters
  14. HTML
  15. Footnotes
  16. Strikethrough
  17. Highlighting
  18. Subscript and Superscript
  19. Automatic Links
  20. Definition Lists

Headings

ATX Style (using #)

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

Setext Style (using underline)

Heading 1
=========

Heading 2
---------

Heading with Custom ID

### My Heading {#custom-id}

Heading with Inline Formatting

# Heading *with* **emphasis**

Paragraphs

This is a paragraph.

This is another paragraph.

This is a paragraph.

This is another paragraph.

Line Breaks

End a line with two or more spaces

First line with two spaces at the end.
Second line.

First line with two spaces at the end. Second line.

Using HTML <br> tag

First line.<br>Second line.

Note: The HTML <br> tag may not render in all Markdown processors due to security settings.

Emphasis

Italic (using asterisks or underscores)

*italic text*
_italic text_

italic text italic text

Bold (using double asterisks or double underscores)

**bold text**
__bold text__

bold text bold text

Bold and Italic Combined

***bold and italic***
___bold and italic___
**_bold and italic_**
__*bold and italic*__

bold and italic bold and italic bold and italic bold and italic

Lists

Unordered Lists

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

Alternative using + or *:

* Item 1
+ Item 2
* Item 3

Ordered Lists

1. First item
2. Second item
3. Third item
  1. First item
  2. Second item
  3. Third item

Lazy Numbering

1. First item
1. Second item
1. Third item
  1. First item
  2. Second item
  3. Third item

Nested Lists

1. First level
   - Second level, unordered
     - Third level
   - Back to second level
2. Back to first level
  1. First level
    • Second level, unordered
      • Third level
    • Back to second level
  2. Back to first level

Definition Lists (Pandoc/PHP Markdown Extra)

Term 1
: Definition 1

Term 2
: Definition 2a
: Definition 2b

[Link text](https://example.com)
[Link with title](https://example.com "Link title")

Link text Link with title

[Reference link][ref]
[Another link][another-reference]

[ref]: https://example.com
[another-reference]: https://example.org "Reference with title"

URLs and Email Addresses

<https://example.com>
<user@example.com>

https://example.com user@example.com

[Link to other page](/other-page.md)
[Link to section](#headings)

Images

Inline Images

![Alt text](image.png)
![Alt text with title](image.jpg "Image title")

Reference-style Images

![Alt text][image-reference]

[image-reference]: image.png

[![Alt text](image.png)](https://example.com)

Images with Syntax (dimensions in some implementations)

<img src="image.jpg" width="300" height="200" />

Blockquotes

Basic Blockquote

> This is a blockquote.

This is a blockquote.

Multiple Paragraphs

> First paragraph.
>
> Second paragraph.

First paragraph.

Second paragraph.

Nested Blockquotes

> First level
>> Second level
>>> Third level

First level

Second level

Third level

Blockquote with Other Elements

> ## Heading in blockquote
>
> - List item
> - Another item
>
> Paragraph with **emphasis**

Heading in blockquote

  • List item
  • Another item

Paragraph with emphasis

Code

Inline Code

Use `backticks` for inline code.

Use backticks for inline code.

Code Block with Indentation

    indented code block
    four spaces or one tab

Fenced Code Blocks

code without syntax highlighting

Code Block with Syntax Highlighting

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

def greet(name):
    print(f"Hello, {name}!")

body {
    font-family: Arial, sans-serif;
}

echo "Hello World"

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>Heading</h1>
</body>
</html>

def greet(name)
  puts "Hello, #{name}!"
end

func greet(name string) {
    fmt.Printf("Hello, %s!\n", name)
}

fn greet(name: &str) {
    println!("Hello, {}!", name);
}

public void greet(String name) {
    System.out.println("Hello, " + name + "!");
}

void greet(string name) {
    cout << "Hello, " << name << "!" << endl;
}

public void Greet(string name) {
    Console.WriteLine($"Hello, {name}!");
}

function greet($name) {
    echo "Hello, $name!";
}

SELECT * FROM users WHERE name = 'John';

{
    "name": "John",
    "age": 30
}

name: John
age: 30

name = "John"
age = 30

-old line
+new line

Code with Line Numbers (some implementations)

```javascript {.line-numbers}
function hello() {
    console.log("Hello");
}


---

## Horizontal Rules

```markdown
***
---
___

All three render as:

Tables

Basic Table

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |
Header 1 Header 2 Header 3
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6

Table Alignment

| Left aligned | Center aligned | Right aligned |
|:-------------|:--------------:|--------------:|
| Left         | Center         | Right         |
| Content      | Content        | Content       |
Left aligned Center aligned Right aligned
Left Center Right
Content Content Content

Table without Pipes (GFM style)

Header 1 | Header 2 | Header 3
---------|----------|----------
Cell 1   | Cell 2   | Cell 3
Cell 4   | Cell 5   | Cell 6

Table with Inline Elements

| Header 1 | Header 2 |
|----------|----------|
| **Bold** | *Italic* |
| `code`   | [link](https://example.com) |
Header 1 Header 2
Bold Italic
code link

Task Lists

- [x] Completed task
- [ ] Incomplete task
- [ ] Task with subitems
  - [x] Completed subtask
  - [ ] Incomplete subtask

Strikethrough (GFM)

~~Strikethrough text~~

Strikethrough text

Highlighting (some implementations)

==Highlighted text==

==Highlighted text==

Footnotes (Pandoc, PHP Markdown Extra)

This is a statement with a footnote[^1].

[^1]: This is the footnote content.

You can have multiple footnotes[^2] and reference them multiple times[^2].

[^2]: This is the second footnote.

This is a statement with a footnote1.

You can have multiple footnotes2 and reference them multiple times2.

Inline Footnotes (Pandoc)

This is an inline footnote.^[Inline footnote content]

Subscript and Superscript (Pandoc)

H~2~O (subscript)
E=mc^2^ (superscript)

H2O (subscript) E=mc^2^ (superscript)

Escaping Characters

To display literal Markdown characters, escape them with backslash:

\*not italic\*
\_not italic_
\[not a link\](not a url)
\`not code\`

*not italic* _not italic_ [not a link](not a url) `not code`

Escapable Characters

\   backslash
`   backtick
*   asterisk
_   underscore
{}  curly braces
[]  square brackets
()  parentheses
#   hash mark
+   plus sign
-   minus sign (hyphen)
.   dot
!   exclamation mark

HTML

Markdown supports inline HTML. Here are some examples:

<div style="color: red;">Red text</div>

<table>
    <tr>
        <td>HTML table</td>
    </tr>
</table>

<!-- HTML comment -->

Note: HTML rendering depends on your Markdown processor configuration. Some processors may strip or escape HTML for security reasons.

HTML Attributes in Markdown (some implementations)

## Heading {.class-name #id-name}

[Link]{#id .class-name}

![Image]{#id .class-name width="300"}

Automatic Extensions

Abbreviations (PHP Markdown Extra)

*[HTML]: Hyper Text Markup Language
*[CSS]: Cascading Style Sheets

We use HTML and CSS.

*[HTML]: Hyper Text Markup Language *[CSS]: Cascading Style Sheets

We use HTML and CSS.

Math (KaTeX, MathJax)

Inline math: $E=mc^2$

Block math:
$$
\frac{n!}{k!(n-k)!} = \binom{n}{k}
$$

Inline math: $E=mc^2$

Block math: $$ \frac{n!}{k!(n-k)!} = \binom{n}{k} $$

CriticMarkup (for document editing)

This is {++added++} text.
This is {--deleted--} text.
This is {~~substituted~>replacement~~} text.
This is {==highlighted==} text.
{>>This is a comment<<}

Emoji (some implementations)

:smile: :heart: :thumbsup:

:smile: :heart: :thumbsup:

Advanced Combinations

Lists with Code

1. Item with `inline code`
2. Item with block code:

   ```python
   print("Hello")


### Blockquotes with Lists

```markdown
> A blockquote with a list:
> - Item 1
> - Item 2

A blockquote with a list:

  • Item 1
  • Item 2

Tables with Multiple Lines

| Column 1 | Column 2 |
|----------|----------|
| Line 1<br>Line 2 | Content |

Best Practices

  1. Consistency: Use one style consistently throughout your document
  2. Readability: Keep line lengths reasonable (80-100 characters)
  3. Spacing: Add blank lines between different elements
  4. Escaping: Escape special characters when you want them literal
  5. Accessibility: Use meaningful alt text for images
  6. Links: Use descriptive link text, not “click here”

Quick Reference

Element Syntax Example
Heading # # Heading
Bold ** or __ **bold**
Italic * or _ *italic*
Strikethrough ~~ ~~text~~
Link [text](url) [link](url)
Image ![alt](url) ![alt](url)
Code ` or ``` `code`
Blockquote > > quote
List - or 1. - item
Table | | col |
Horizontal rule --- or *** ---

Conclusion

This guide covers all major Markdown syntax elements. Different Markdown implementations (CommonMark, GitHub Flavored Markdown, Pandoc, PHP Markdown Extra) may support additional features or have slight variations.

For the best compatibility, use CommonMark or GitHub Flavored Markdown (GFM) syntax.

Resources:

  1. This is the footnote content. ↩︎

  2. This is the second footnote. ↩︎ ↩︎

#Markdown #Syntax #Tutorial #Guide