MarkDown 语法手册

擒贼先擒王

已于 2024-01-16 17:04:15 修改

阅读量1.4k

点赞数 1

分类专栏：工具文章标签：前端

于 2017-04-26 17:40:37 首次发布

原文链接：https://markdown.com.cn/cheat-sheet.html

版权

工具专栏收录该内容

34 篇文章 19 订阅

订阅专栏

From：https://markdown.com.cn/cheat-sheet.html

Markdown 语法图文全面详解(10分钟学会)

Markdown 在线工具：https://c.runoob.com/front-end/712/

1、Markdown 简介

Markdown 是什么

Markdown 是一种轻量级的标记语言，保存在以 .md 或 .markdown 扩展名的纯文本文件中。Markdown 由 John Gruber 于 2004 年创建，如今已成为世界上最受欢迎的标记语言之一。

专注于文字内容；
纯文本，易读易写，可以方便地纳入版本控制；
语法简单，没有什么学习成本，能轻松在码字的同时做出美观大方的排版。

Markdown 与 Microsoft Word 类编辑器区别：

Markdown无处不在。StackOverflow、CSDN、掘金、简书、GitBook、有道云笔记、V2EX、光谷社区等。主流的代码托管平台，如 GitHub、GitLab、BitBucket、Coding、Gitee 等等，都支持Markdown语法，很多开源项目的 README、开发文档、帮助文档、Wiki 等都用Markdown写作。
Markdown是纯文本可移植的。几乎可以使用任何应用程序打开包含Markdown格式的文本文件。如果你不喜欢当前使用的Markdown应用程序了，则可以将Markdown文件导入另一个Markdown应用程序中。这与 Microsoft Word 等文字处理应用程序形成了鲜明的对比，Microsoft Word 将你的内容锁定在专有文件格式中。
Markdown是独立于平台的。你可以在运行任何操作系统的任何设备上创建Markdown格式的文本。
Markdown能适应未来的变化。即使你正在使用的应用程序将来会在某个时候不能使用了，你仍然可以使用文本编辑器读取Markdown格式的文本。当涉及需要无限期保存的书籍、大学论文和其他里程碑式的文件时，这是一个重要的考虑因素。

Markdown 有什么用

Markdown 可以用来做笔记、为网站创建内容、生成可打印文档等。大多数人使用 Markdown 来为网站创建内容。

常用工具

现代编辑器：VSCode / Atom
传统编辑器：Vim / Emacs / Sublime Text / Notepad++
IDE 自带编辑器：IntelliJ IDEA / Android Studio / WebStorm
专用编辑器：Ulysses / Mou / Typora / Markpad
在线工具、插件：在线编辑器：https://markdown.com.cn/editor/
浏览器插件：前端助手、

每个 Markdown 应用程序都实现了稍有不同的 Markdown 语法。Markdown 的这些变体通常被称为 flavors（方言）。当一个 Markdown 工具不支持时，可以换一种工具试试。

2、Markdown 语法

速查表

所有 Markdown 应用程序都支持这些元素。

下面的扩展并非所有 Markdown 应用程序都支持这些元素。

基本语法

Markdown的语法十分简单，常用的标记符号不超过十个，用于日常写作记录绰绰有余，不到半小时就能完全掌握。

标题

为了兼容考虑，在 # 和标题 之间最好用一个空格进行分隔。

标题编号 ( 锚点，在标题后插入锚点，其它地方无效 )

## 0. 目录{#index}

跳转到[目录](#index)

示例：### My Great Heading {#custom-id}

HTML看起来像这样：<h3 id="custom-id">My Great Heading</h3>

链接到标题ID (#headid)：通过创建带有数字符号（#）和自定义标题ID的[标准链接]((/basic-syntax/links.html)，可以链接到文件中具有自定义ID的标题。

段落

创建段落（Paragraph），可以使用空白行将一行或多行文本进行分隔。
最佳实践：不要用空格（spaces）或制表符（ tabs）缩进段落。

换行

结尾空格（trailing whitespace) 换行：在一行的末尾添加两个或多个空格，然后按回车键即可创建一个换行
HTML 的 <br> 标签。为了兼容性，推荐使用 <br> 标签进行换行。

强调：粗体、斜体

斜体：使用一个 "星号或者下划线" 括起来，示例：Love*is*bold
粗体（Bold）：使用两个 "星号或者下划线" 括起来。为兼容考虑，请使用星号（asterisks）。示例：Love**is**bold
同时使用粗体和斜体：使用三个 "星号或者下划线" 括起来

示例：

*斜体* 或 _斜体_
**粗体**
***加粗斜体***
~~删除线~~

引用

在每行的开头使用 > 符号，可以创建一个段落
在每行开头都添加一个 > 符号是多个段落。也可以偷懒只在整个段落的第一行最前面加上 >
嵌套块引用：块引用可以嵌套。在要嵌套的段落前添加一个 >> 符号。
块引用可以包含其他 Markdown 格式的元素。并非所有元素都可以使用，你需要进行实验以查看哪些元素有效。

> #### The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
> *Everything* is going according to **plan**.

区块引用可以嵌套（例如：引用内的引用），只要根据层次加上不同数量的 > ：

>>> 请问 Markdwon 怎么用？ - 小白

>> 自己看教程！ - 愤青

> 教程在哪？ - 小白

列表

"有序、无序" 列表

有序列表：在每个列表项前添加数字并紧跟一个英文句点。数字不必按数学顺序排列，但是列表应当以数字 1 起始。
最佳实践
1. First item
2. Second item

无序列表：在每个列表项前面添加破折号 (-)、星号 (*) 或加号 (+) 。缩进一个或多个列表项可创建嵌套列表。
最佳实践
- First item
- Second item
- Third item
- Fourth item

列表中嵌套其他元素：要在保留列表连续性的同时在列表中添加另一种元素，请将该元素缩进四个空格或一个制表符

创建术语及其对应定义的定义列表。要创建定义列表，请在第一行上键入术语。在下一行，键入一个冒号，后跟一个空格和定义。

First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.

HTML看起来像这样：

<dl>
<dt>First Term</dt>
<dd>This is the definition of the first term.</dd>
<dt>Second Term</dt>
<dd>This is one definition of the second term. </dd>
<dd>This is another definition of the second term.</dd>
</dl>

复选框

创建带有复选框的列表。列表项之前添加破折号-和方括号[ ]，并在[ ]前面加上空格。要选择一个复选框，请在方括号[x]之间添加 x 。

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

代码块

语法说明：

插入行内代码，即插入一个单词或者一句代码的情况，使用`code`这样的形式插入。
插入多行代码，可以使用缩进或者 ``` 多行code```，具体看示例。

注意：缩进式插入前方必须有空行

要将单词或短语表示为代码，请将其包裹在反引号 (`) 中。
转义反引号：为代码的单词或短语中包含一个或多个反引号，则可以通过将单词或短语包裹在双反引号(``)中。

要创建代码块，请将代码块的每一行缩进至少四个空格或一个制表符。

通过将行缩进四个空格或一个制表符来创建代码块。如果发现不方便，可以在代码块之前和之后的行上使用三个反引号（(```）或三个波浪号（~~~）。

许多Markdown处理器都支持受围栏代码块的语法突出显示。使用此功能，您可以为编写代码的任何语言添加颜色突出显示。要添加语法突出显示，请在受防护的代码块之前的反引号旁边指定一种语言。

```json
{
"firstName": "John",
"lastName": "Smith",
"age": 25
}
```

分隔线

创建分隔线，可以在单独一行上使用三个或多个星号 (***)、破折号 (---) 或下划线 (___) ，并且不能包含其他内容。为了兼容性，请在分隔线的前后行都添加一行空白行。

链接

示例：这是一个链接 [Markdown语法](https://markdown.com.cn)。

链接文本放在中括号内，链接地址放在后面的括号中，链接title可选。
超链接Markdown语法代码：[超链接显示名](超链接地址 "超链接title")
对应的HTML代码：<a href="超链接地址" title="超链接title">超链接显示名</a>

自动链接：用<>包起来， Markdown 就会自动把它转成网址的链接文字和链接地址。

示例：
<https://markdown.com.cn>
<fake@example.com>

强调链接：在链接语法前后增加星号。要将链接表示为代码，请在方括号中添加反引号。

I love supporting the **[EFF](https://eff.org)**.
This is the *[Markdown Guide](https://www.markdownguide.org)*.
See the section on [`code`](#code).

引用样式链接，又叫 参考式超链接。一般用在学术论文上面。

语法说明：参考式链接分为两部分，文中的写法 [链接文字][链接标记]，在文本的任意位置添加[链接标记]:链接地址 “链接标题”，链接地址与链接标题前有一个空格。

如果链接文字本身可以做为链接标记，你也可以写成[链接文字][]
[链接文字]：链接地址的形式，见代码的最后一行。

代码：

我经常去的几个网站[Google][1]、[Leanote][2]以及[自己的博客][3]
[Leanote 笔记][2]是一个不错的[网站][]。

[1]:http://www.google.com "Google"
[2]:http://www.leanote.com "Leanote"
[3]:http://http://blog.leanote.com/freewalk "梵居闹市"
[网站]:http://http://blog.leanote.com/freewalk

显示效果：

不同的 Markdown 应用程序处理URL中间的空格方式不一样。为了兼容性，请尽量使用%20代替空格。

图片

要添加图像，请使用感叹号 (!), 然后在方括号增加替代文本，图片链接放在圆括号里，括号里的链接后可以增加一个可选的图片标题文本。

插入图片Markdown语法代码：![图片alt](图片链接 "图片title")。
对应的HTML代码：<img src="图片链接" alt="图片alt" title="图片title">
示例：![这是图片](/assets/img/philly-magic-garden.jpg "Magic Gardens")

给图片增加链接，请将图像的Markdown 括在方括号中，然后将链接添加在圆括号中。

示例：[![沙漠中的岩石图片](/assets/img/shiprock.jpg "Shiprock")](https://markdown.com.cn)

图片的创建方式与超链接相似，而且和超链接一样也有两种写法，行内式和参考式写法。

行内式：语法说明：![图片Alt](图片地址 “图片Title”)

代码：

MarkDown 测试：美女图片
![美女](http://www.nvshentu.com/uploads/allimg/170101/1_010110413DD9.jpg "美女图片")

参考式：语法说明：在文档要插入图片的地方写：![图片Alt][标记]
在文档的最后写上：[标记]:图片地址 "Title"

代码：

MarkDown 测试：美女图片
![美女][beautiful_mm]

[beautiful_mm]:http://www.nvshentu.com/uploads/allimg/170101/1_010110413DD9.jpg "美女图片"

转义

要显示原本用于格式化 Markdown 文档的字符，请在字符前面添加反斜杠字符 \

内嵌 HTML 标签

对于 Markdown 范围之外的标签，都可以直接在文件里面用 HTML 本身。只需要复制粘贴 HTML 内容，剩下的 Markdown 都会帮你处理。

HTML 的行级內联标签如 <span>、<cite>、<del> 不受限制，可以在 Markdown 的段落、列表或是标题里任意使用。依照个人习惯，甚至可以不用 Markdown 格式，而采用 HTML 标签来格式化。例如：如果喜欢 HTML 的 <a> 或 <img> 标签，可以直接使用这些标签，而不用 Markdown 提供的链接或是图片语法。当你需要更改元素的属性时（例如为文本指定颜色或更改图像的宽度），使用 HTML 标签更方便些。

HTML 行级內联标签和区块标签不同，在內联标签的范围内， Markdown 的语法是可以解析的。

This **word** is bold. This <em>word</em> is italic.

区块元素，比如 <div>、<table>、<pre>、<p> 等标签，必须在前后加上空行，以便于内容区分。而且这些元素的开始与结尾标签，不可以用 tab 或是空白来缩进。Markdown 会自动识别这区块元素，避免在区块标签前后加上没有必要的 <p> 标签。

请注意，Markdown 语法在 HTML 区块标签中将不会被进行处理。例如，你无法在 HTML 区块内使用 Markdown 形式的*强调*。

出于安全原因，并非所有 Markdown 应用程序都支持在 Markdown 文档中添加 HTML。

对于 HTML 的块级元素 <div>、<table>、<pre> 和 <p>，请在其前后使用空行（blank lines）与其它内容进行分隔。尽量不要使用制表符（tabs）或空格（spaces）对 HTML 标签做缩进，否则将影响格式。

基础语法应付大多数日常所需元素，但对于某些人来说还不够，这就是扩展语法的用武之地。并非所有Markdown应用程序都支持扩展语法元素

有几种轻量级标记语言是Markdown的超集。它们包含Gruber的基本语法，并通过添加其他元素（例如表，代码块，语法突出显示，URL自动链接和脚注）在此基础上构建。许多最受欢迎的Markdown应用程序使用以下轻量级标记语言之一：

下面开始都是扩展语法

表格

要添加表，请使用三个或多个连字符（---）创建每列的标题，并使用管道（|）分隔每列。您可以选择在表的任一端添加管道。

| Syntax | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |

使用连字符和管道创建表可能很麻烦。为了加快该过程，可以使用 Markdown Tables Generator。使用图形界面构建表，然后将生成的Markdown格式的文本复制到文件中。

对齐：可以通过在标题行中的连字符的左侧，右侧或两侧添加冒号（:），将列中的文本对齐到左侧，右侧或中心。

| Syntax | Description | Test Text |
| :--- | :----: | ---: |
| Header | Title | Here's this |
| Paragraph | Text | And more |

格式化表格中的文字：可以在表格中设置文本格式。例如，您可以添加链接，代码（仅反引号（`）中的单词或短语，而不是代码块）和强调。不能添加标题，块引用，列表，水平规则，图像或HTML标签。

删除线

单词前后使用两个波浪号~~

示例：~~世界是平坦的。~~ 我们现在知道世界是圆的。

使用 Emoji 表情

有两种方法可以将表情符号添加到Markdown文件中：将表情符号复制并粘贴到Markdown格式的文本中，或者键入emoji shortcodes。

注脚

使用 Markdown[^1]可以效率的书写文档, 直接转换成 HTML[^2], 你可以使用 Leanote[^Le] 编辑器进行书写。

[^1]:Markdown是一种纯文本标记语言

[^2]:HyperText Markup Language 超文本标记语言

[^Le]:开源笔记平台，支持Markdown和笔记直接发为博文

LaTeX 公式

访问 MathJax 参考更多使用方法。

一个 $ 表示行内公式：

代码：质能守恒方程可以用一个很简洁的方程式 $E=mc^2$ 来表达。

显示效果：

两个 $ 表示整行公式：

代码：

$$\sum_{i=1}^n a_i=0$$

$$f(x_1,x_x,\ldots,x_n) = x_1^2 + x_2^2 + \cdots + x_n^2 $$

显示效果：

流程图

更多语法参考：http://adrai.github.io/flowchart.js/

UML快速入门

：https://www.zhihu.com/tardis/zm/art/347398382

3、 Markdown 使用示例

示例 1

# 欢迎使用 Markdown在线编辑器

**Markdown是一种轻量级的「标记语言」**

> Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面，Markdown文件的后缀名便是“.md”

## MdEditor的功能列表演示

# 标题H1
## 标题H2
### 标题H3
#### 标题H4
##### 标题H5
###### 标题H5
### 字符效果和横线等
----

~~删除线~~ <s>删除线（开启识别HTML标签时）</s>

*斜体字*      _斜体字_

**粗体**  __粗体__

***粗斜体*** ___粗斜体___

上标：X<sub>2</sub>，下标：O<sup>2</sup>

**缩写(同HTML的abbr标签)**

> 即更长的单词或短语的缩写形式，前提是开启识别HTML标签时，已默认开启

The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.
### 引用 Blockquotes

> 引用文本 Blockquotes

引用的行内混合 Blockquotes

> 引用：如果想要插入空白换行`即<br />标签`，在插入处先键入两个以上的空格然后回车即可，[普通链接](https://www.mdeditor.com/)。

### 锚点与链接 Links
[普通链接](https://www.mdeditor.com/)
[普通链接带标题](https://www.mdeditor.com/ "普通链接带标题")
直接链接：<https://www.mdeditor.com>
[锚点链接][anchor-id]
[anchor-id]: https://www.mdeditor.com/
[mailto:test.test@gmail.com](mailto:test.test@gmail.com)
GFM a-tail link @pandao
邮箱地址自动链接 test.test@gmail.com  www@vip.qq.com
> @pandao

### 多语言代码高亮 Codes

#### 行内代码 Inline code


执行命令：`npm install marked`


#### JS代码
```javascript
function test() {
	console.log("Hello world!");
}
```

#### HTML 代码 HTML codes
```html
<!DOCTYPE html>
<html>
    <head>
        <mate charest="utf-8" />
        <meta name="keywords" content="Editor.md, Markdown, Editor" />
        <title>Hello world!</title>
        <style type="text/css">
            body{font-size:14px;color:#444;font-family: "Microsoft Yahei", Tahoma, "Hiragino Sans GB", Arial;background:#fff;}
            ul{list-style: none;}
            img{border:none;vertical-align: middle;}
        </style>
    </head>
    <body>
        <h1 class="text-xxl">Hello world!</h1>
        <p class="text-green">Plain text</p>
    </body>
</html>
```
### 图片 Images

图片加链接 (Image + Link)：


![](https://www.baidu.com/img/bd_logo1.png "markdown")

> Follow your heart.

----
### 列表 Lists

#### 无序列表（减号）Unordered Lists (-)

- 列表一
- 列表二
- 列表三

#### 无序列表（星号）Unordered Lists (*)

* 列表一
* 列表二
* 列表三

#### 无序列表（加号和嵌套）Unordered Lists (+)
+ 列表一
+ 列表二
    + 列表二-1
    + 列表二-2
    + 列表二-3
+ 列表三
    * 列表一
    * 列表二
    * 列表三

#### 有序列表 Ordered Lists (-)

1. 第一行
2. 第二行
3. 第三行

----

### 绘制表格 Tables

| 项目        | 价格   |  数量  |
| --------   | -----:  | :----:  |
| 计算机      | $1600   |   5     |
| 手机        |   $12   |   12   |
| 管线        |    $1    |  234  |


First Header  | Second Header
------------- | -------------
Content Cell  | Content Cell
Content Cell  | Content Cell


| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

| Function name | Description                    |
| ------------- | ------------------------------ |
| `help()`      | Display the help window.       |
| `destroy()`   | **Destroy your computer!**     |

| Left-Aligned  | Center Aligned  | Right Aligned |
| :------------ |:---------------:| -----:|
| col 3 is      | some wordy text | $1600 |
| col 2 is      | centered        |   $12 |
| zebra stripes | are neat        |    $1 |

| Item      | Value |
| --------- | -----:|
| Computer  | $1600 |
| Phone     |   $12 |
| Pipe      |    $1 |

示例 2

图片显示不不清楚，“右键”-》“在新标签页中打开图片” ，就可以看清楚图片

擒贼先擒王

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
MarkDown 语法手册

Markdown 是一种轻量级的标记语言，书写时文本内容存储在带有.md或.markdown扩展名的纯文本文件中。Markdown 由 John Gruber 于 2004 年创建，如今已成为世界上最受欢迎的标记语言之一。专注于文字内容；纯文本，易读易写，可以方便地纳入版本控制；语法简单，没有什么学习成本，能轻松在码字的同时做出美观大方的排版。Markdown 与 Microsoft Word 类编辑器区别：Markdown 无处不在。
复制链接

扫一扫