Markdown Cheatsheet：完整语法渲染样例

来自开源项目的 Markdown 与 GitHub Flavored Markdown 完整渲染样例。

作者：二叉树树 AcoFork · 1998-12-30

📝 Typography

Heading 1

Markup :

text

# Heading 1

Alternative markup :

text

============= (below H1 text)

Heading 2

Markup :

text

## Heading 2

Alternative markup :

text

--------------- (below H2 text)

Heading 3

Markup :

text

### Heading 3

Heading 4

Markup :

text

#### Heading 4

Common text

Markup :

text

Common text

Emphasized text

Markup :

text

_Emphasized text_ or *Emphasized text*

Strikethrough text

Markup :

text

~~Strikethrough text~~

Strong text

Markup :

text

__Strong text__ or **Strong text**

Strong emphasized text

Markup :

text

___Strong emphasized text___ or ***Strong emphasized text***

Named Link and http://www.google.fr/ or http://example.com/

Markup :

text

[Named Link](http://www.google.fr/ "Named link title") and http://www.google.fr/ or <http://example.com/>

Link to heading or Link to section

Markup:

text

[Link to heading](#heading-1 "Goto heading-1") or [Link to section](#TOP)

🧮 Tables

A standard table

First Header

Second Header

Content Cell

Markup :

text

First Header | Second Header

------------- | -------------

Content Cell | Content Cell

Adding a pipe | in a cell :

First Header

Second Header

Content Cell

Markup :

text

First Header | Second Header

------------- | -------------

Content Cell | Content Cell

Content Cell | \|

Left, right and center aligned table

Left aligned Header

Right aligned Header

Center aligned Header

Content Cell

Markup :

text

Left aligned Header | Right aligned Header | Center aligned Header

| :--- | ---: | :---:

Content Cell | Content Cell | Content Cell

👩‍💻 Code

Inline code

code()

Markup :

text

`code()`

Code block

javascript

var myGreatVariable = 'test'

Markup :

text

```javascript

var myGreatVariable = 'test'

```

📜 Lists

Unordered list

Bullet list

Nested bullet

Sub-nested bullet etc

Bullet list item 2

Markup :

text

* Bullet list

* Nested bullet

* Sub-nested bullet etc

* Bullet list item 2

Alternative markup :

text

- Bullet list

- Nested bullet

- Sub-nested bullet etc

- Bullet list item 2

Numbered list

A numbered list

A nested numbered list

Which is numbered

Markup :

text

1. A numbered list

1. A nested numbered list

2. Which is numbered

Alternative markup (the numbering is automatic):

text

1. A numbered list

1. A nested numbered list

1. Which is numbered

Task list

An uncompleted task

A completed task

A subtask

Markup :

text

- [ ] An uncompleted task

- [x] A completed task

- [ ] A subtask

🗣️ Quoting

Blockquote

Nested blockquote

Markup :

text

> Blockquote

>> Nested Blockquote

Footnotes (see end of README)

Here is a simple footnote[^1].

A footnote can also have multiple lines[^2].

[^1]: A reference.

[^2]: To add line breaks within a footnote, Add a carriage return and prefix the new line with 4 spaces.

text

This is a second line.

Markup :

text

Here is a simple footnote[^1].

A footnote can also have multiple lines[^2].

[^1]: My reference.

[^2]: To add line breaks within a footnote, Add a carriage return and prefix the new line with 4 spaces.

This is a second line.

🖼️ Media / Emojis

Image with alt :

Markup :

text

![picture alt](https://placehold.co/600x200 "Title is optional")

Emoji

:exclamation: Use emoji icons to enhance text. :+1: Look up emoji codes at emoji-cheat-sheet.com

Markup (Emoji slug should appear between colons):

text

:+1: :exclamation:

⁉️ Alerts

备注

Highlights information that users should take into account, even when skimming.

Markup :

text

<aside class="markdown-alert markdown-alert--note"><div class="markdown-alert-title"><svg class="markdown-alert-icon" aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg><span>备注</span></div><div class="markdown-alert-body"><p>Highlights information that users should take into account, even when skimming.</p>

</div></aside>

提示

Optional information to help a user be more successful.

Markup :

text

<aside class="markdown-alert markdown-alert--tip"><div class="markdown-alert-title"><svg class="markdown-alert-icon" aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg><span>提示</span></div><div class="markdown-alert-body"><p>Optional information to help a user be more successful.</p>

</div></aside>

重要

Crucial information necessary for users to succeed.

Markup :

text

<aside class="markdown-alert markdown-alert--important"><div class="markdown-alert-title"><svg class="markdown-alert-icon" aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg><span>重要</span></div><div class="markdown-alert-body"><p>Crucial information necessary for users to succeed.</p>

</div></aside>

警告

Critical content demanding immediate user attention due to potential risks.

Markup :

text

<aside class="markdown-alert markdown-alert--warning"><div class="markdown-alert-title"><svg class="markdown-alert-icon" aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg><span>警告</span></div><div class="markdown-alert-body"><p>Critical content demanding immediate user attention due to potential risks.</p>

</div></aside>

注意

Negative potential consequences of an action.

Markup :

text

<aside class="markdown-alert markdown-alert--caution"><div class="markdown-alert-title"><svg class="markdown-alert-icon" aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M12 16h.01"/><path d="M12 8v4"/><path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"/></svg><span>注意</span></div><div class="markdown-alert-body"><p>Negative potential consequences of an action.</p>

</div></aside>

💬 Misc

Foldable text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Markup :

text

<summary>Title 1</summary>

<p>Lorem ipsum dolor sit amet, ...</p>

</details>

Hotkey

⌘F

Markup :

text

Hotkey symbols handy list below

Key

Symbol

Key

Symbol

Option

⌥

Power

⌽

Control

⌃

Return

↩

Command

⌘

Delete

⌫

Shift

⇧

↑

Caps Lock

⇪

Down

↓

Tab

⇥

Left

←

Esc

⎋

Right

→

Horizontal line

Markup :

text

- - - -

Inline mathematical equation $F(x) = \int^a_b \frac{1}{3}x^3$

Markup :

text

$F(x) = \int^a_b \frac{1}{3}x^3$

Block mathematical equation

$P \left( A=2 , \middle| , \dfrac{A^2}{B}>4 \right)$

Markup :

text

$P \left( A=2 \, \middle| \, \dfrac{A^2}{B}>4 \right)$

来源与许可

本文内容来自 tchapi/markdown-cheatsheet，原项目按 MIT License 发布，版权归 tchapi 所有。

完整交互功能需要 JavaScript；加载后即可使用。以下入口可直接打开。