写在开始
Markdown 是一种轻量级的标记语言,可用于在纯文本文档中添加格式化元素。对我而言用着十分趁手,它的入门并不难,多尝试、学习一些他人的经验或者配合着HTML
也能更快、更快乐的享受Markdown编辑的乐趣。另外一个原因是Markdown是独立于平台且可以自由移植的。几乎可以使用任何应用程序打开包含 Markdown 格式的文本文件。如果你不喜欢当前使用的 Markdown 应用程序了,则可以将 Markdown 文件导入另一个 Markdown 应用程序中。这与 Microsoft Word 等文字处理应用程序形成了鲜明的对比,Microsoft Word 将你的内容锁定在专有文件格式中需要用到特定的程序来打开。
本文基于Markdown的原版官方文档进行编排整理,其中不乏融入自己的一些使用误区提示及便捷方法,部分用法及快捷方式因个人能力有限未能提及,在后续的更新中会不断的完善。
标题
要创建标题,请在单词或短语前面添加井号 (#
) 。井号的数量代表了标题的级别。例如,添加三个井号即创建一个三级标题 (<h3>
) (例如:### My Header
)。
Markdown | HTML |
---|---|
# Heading level 1 |
<h1>Heading level 1</h1> |
## Heading level 2 |
<h2>Heading level 2</h2> |
### Heading level 3 |
<h3>Heading level 3</h3> |
#### Heading level 4 |
<h4>Heading level 4</h4> |
##### Heading level 5 |
<h5>Heading level 5</h5> |
###### Heading level 6 |
<h6>Heading level 6</h6> |
可选语法
还可以在文本下方添加任意数量的 ==
号来标识一级标题,或者 --
号来标识二级标题。
Heading level 1 |
<h1>Heading level 1</h1> |
标题用法的最佳实践
当井号(#
)和标题文本之间没有空格时,各 Markdown 应用程序的处理方式是不一样的。为了兼容考虑,请在井号和标题文本之间添加一个空格。
✅ 这样做 | ❌ 不要这样做 |
---|---|
# Here's a Heading |
#Here's a Heading |
为了兼容性,还应该在标题前后放置空行。
Try to put a blank line before... |
段落
要创建段落,请使用空白行将一行或多行文本进行分隔。
I really like using Markdown. |
<p>I really like using Markdown.</p> |
段落用法的最佳实践
除非段落在列表中,否则不要用空格(spaces)或制表符( tabs (选项卡) )缩进段落。
✅ 这样做 |
换行
在一行的末尾添加两个或多个空格,然后按回车键,即可创建一个换行(line break)或新行 (<br>
)。
This is the first line. |
<p>This is the first line.<br> |
换行用法的最佳实践
几乎每个 Markdown 应用程序都支持两个或多个空格进行换行 (称为 “结尾空格(trailing whitespace)”) 的方式,但这是有争议的,因为很难在编辑器中直接看到空格,并且很多人在每个句子后面都会有意或无意地添加两个空格。由于这个原因,你可能需要使用除结尾空格以外的其它方式来进行换行。如果你所使用的 Markdown 应用程序支持 HTML的话,你可以使用 HTML 的 <br>
标签来实现换行。
为了兼容性,请在行尾添加“结尾空格”或 HTML 的 <br>
标签来实现换行。
还有两种其他方式我并不推荐使用。CommonMark 和其它几种轻量级标记语言支持在行尾添加反斜杠 (\
) 的方式实现换行,但是并非所有 Markdown 应用程序都支持此种方式,因此从兼容性的角度来看,不推荐使用。并且至少有两种轻量级标记语言支持无须在行尾添加任何内容,只须键入回车键即可实现换行。
强调
通过将文本设置为粗体或斜体来强调其重要性。
粗体
要加粗文本,请在单词或短语的前后各添加两个星号或下划线。如需加粗一个单词或短语的中间部分用以表示强调的话,请在要加粗部分的两侧各添加两个星号。
Markdown | HTML |
---|---|
I just love **bold text**. |
I just love <strong>bold text</strong>. |
I just love __bold text__. |
I just love <strong>bold text</strong>. |
Love**is**bold |
Love<strong>is</strong>bold |
粗体用法最佳实践
Markdown 应用程序在如何处理单词或短语中间的下划线上并不一致。为兼容考虑,在单词或短语中间部分加粗的话,请使用星号
✅ 这样做 | ❌ 尽量不要这样做 |
---|---|
Love**is**bold |
Love__is__bold |
斜体
要用斜体显示文本,请在单词或短语前后添加一个星号或下划线。要斜体突出单词的中间部分,请在字母前后各添加一个星号,中间不要带空格。
Markdown | HTML | 渲染效果 |
---|---|---|
Italicized text is the *cat's meow*. |
Italicized text is the <em>cat's meow</em>. |
Italicized text is the cat’s meow (喵) . |
Italicized text is the _cat's meow_. |
Italicized text is the <em>cat's meow</em>. |
Italicized text is the cat’s meow (喵) . |
A*cat*meow |
A<em>cat</em>meow |
Acatmeow (喵) |
斜体用法的最佳实践
Markdown 的众多应用程序在如何处理单词中间的下划线上意见不一致。为了兼容起见,请用星号标注单词中间的斜体来表示着重。
✅ 这样做 | ❌ 尽量不要这样做 |
---|---|
A*cat*meow |
A_cat_meow |
粗体和斜体
要同时用粗体和斜体突出显示文本,请在单词或短语的前后各添加三个星号或下划线。要加粗并用斜体显示单词或短语的中间部分,请在要突出显示的部分前后各添加三个星号,中间不要带空格。
Markdown | HTML | 渲染效果 |
---|---|---|
This text is ***really important***. |
This text is <strong><em>really important</em></strong>. |
This text is really important. |
This text is ___really important___. |
This text is <strong><em>really important</em></strong>. |
This text is really important. |
This text is __*really important*__. |
This text is <strong><em>really important</em></strong>. |
This text is really important. |
This text is **_really important_**. |
This text is <strong><em>really important</em></strong>. |
This text is really important. |
This is really***very***important text. |
This is really<strong><em>very</em></strong>important text. |
This is reallyveryimportant text. |
粗体和斜体用法的最佳实践
Markdown 应用程序在处理单词或短语中间添加的下划线上并不一致。为了实现兼容性,请使用星号将单词或短语的中间部分加粗并以斜体显示,以示重要。
✅ 这样做 | ❌ 尽量不要这样做 |
---|---|
This is really***very***important text. |
This is really___very___important text. |
高亮
这并不常见,但一些 Markdown 处理器可以突出显示文本。结果看起来像这样。要突出显示单词,请在单词前后使用两个等号 (==)
I need to highlight these ==very important words==. |
I need to highlight these <mark>very important words</mark>. |
效果如下:
I need to highlight these ==very important words.==
Tip:此语法对于部分编辑程序并不适用
删除线
贯穿单词的中心放一条横线从而删除这些单词。其效果看起来是这样的: like this。此功能允许你标记某些单词是错误的,不应该出现在文档中。在单词前面和后面分别放置两个波浪号(~~
) 来表示删除这些单词。
~~The world is flat.~~ We now know that the world is round. |
渲染效果如下:
The world is flat. We now know that the world is round.
脚注
脚注允许添加注释和引用,而不会使文档正文混乱。当你创建脚注时,带有链接的上标数字会出现在你引用脚注的位置。 读者可以单击链接以跳转至页面底部的脚注内容处。
要创建一个脚注的引用,请在中括号中添加一个插入符以及一个标识符,标识符可以是数字或单词,但不能包含空格或制表符。标识符的作用仅是将脚注的引用和脚注本身进行关联,在输出中,脚注按顺序编号。
另一种创建脚注的方式是在中括号内添加一个插入符(caret)以及一个数字,后面跟着冒号和文本,即([^1]: My footnote
)。这种方式让你不必在文档末尾添加脚注。可以将脚注放到除列表(lists)、块引用(block quotes)和表格(tables)之外的任何位置上。
Here's a simple footnote,[^1] and here's a longer one.[^bignote] |
渲染效果如下:
Here’s a simple footnote,[^1] and here’s a longer one.[^bignote]
[^1]: This is the first footnote.
[^bignote]: Here’s one with multiple paragraphs and code.
下标
这并不常见,但一些 Markdown 处理器允许使用下标将一个或多个字符放置在略低于正常类型行的位置。要创建下标 (标),请在字符前后使用一个波浪号 (~)。
H~2~O |
H<sub>2</sub>O |
渲染效果如下:
H2O
Tip:在使用之前,请务必在你的 Markdown 应用程序中测试此功能。一些 Markdown 应用程序在单词前后使用一个波浪号,不是用于下标(标),而是用于删除线。
上标
这并不常见,但一些 Markdown 处理器允许使用上标 (标) 将一个或多个字符定位在略高于正常类型行的位置。要创建上标 (标),请在字符前后使用一个插入符号 (^)。
X^2^ |
X<sup>2</sup> |
渲染效果如下:
X^2^
表情符号
有两种方式可以将表情符号添加到 Markdown 文档中:将表情符号复制并粘贴到 Markdown 格式的文本中,或者键入 表情符号的简码(emoji shortcodes)。
复制并粘贴表情符号
在大多数情况下,你可以简单地从 Emojipedia 等来源复制表情符号,然后将其粘贴到文档中。许多 Markdown 应用程序就会自动以 Markdown 格式的文本来显示表情符号。从 Markdown 应用程序导出的 HTML 和 PDF 文件也是可以显示表情符号的。
Tip: 如果你使用的是静态站点生成器,请确保HTML 页面的字符编码为 UTF-8
使用表情符号的简码
某些 Markdown 应用程序允许你通过键入表情符号的简码(shortcodes)来插入表情符号。简码以冒号开头和结尾,两个冒号中间是表情符号的名称。
Gone camping! :tent: Be back soon. |
渲染效果如下所示:
Gone camping! ⛺ Be back soon.
That is so funny! 😂
Tip: 你可以使用这个 表情符号简码列表,但请记住,表情符号的简码随着 Markdown 应用程序的不同而不同。有关详细信息,请参阅你所使用的 Markdown 应用程序的文档。
图片
要添加图片,首先请添加感叹号(!
),然后紧跟着是方括号,方括号中可添加替代文本(alt text,即图片显示失败后显示此文本),最后跟着圆括号,圆括号中添加图片资源的路径或 URL。你可以选择在圆括号中的 URL 之后添加标题(即 title 属性)。
 |
渲染效果如下:
带链接的图片
要为图片添加链接,请先为图片的 Markdown 标记添加一个中括号,然后紧跟着一个小括号,并在小括号中添加链接地址。
[](https://wallhaven.cc/w/1k6ljv) |
渲染效果如下:
转义字符
要显示原本用于格式化 Markdown 文档的字符,请在字符前面添加反斜杠字符 (\
) 。
\* 如果没有开头的反斜杠字符的话,这一行将显示为无序列表。 |
渲染效果如下:
* 如果没有开头的反斜杠字符的话,这一行将显示为无序列表。
可做转义的(英文)字符
以下列出的字符都可以通过使用反斜杠字符从而达到转义目的。
字符 | 名称 |
---|---|
\ | 反斜杠 |
` | backtick |
* | 星号 |
_ | 下划线 |
{ } | 花括号 |
[ ] | 中括号或方括号 |
< > | 尖括号 |
( ) | 小括号或圆括号 |
# | 井号 |
+ | 加号 |
- | 减号 (也叫连字符 ) |
. | 句点 |
! | 感叹号 |
| | 管道符 |
块引用
要创建块引用,请在段落前添加一个 >
符号。
> Dorothy followed her through many of the beautiful rooms in her castle. |
渲染效果如下所示:
Dorothy followed her through many of the beautiful rooms in her castle (城堡) .
多个段落的块引用
块引用可以包含多个段落。为段落之间的空白行各添加一个 >
符号。
> Dorothy followed her through many of the beautiful rooms in her castle. |
渲染效果如下:
Dorothy followed her through many of the beautiful rooms in her castle (城堡) .
The Witch (女巫) bade her clean the pots and kettles (水壶) and sweep the floor and keep the fire fed (美联储) with wood.
嵌套块引用
块引用可以嵌套。在要嵌套的段落前添加一个 >>
符号。
> Dorothy followed her through many of the beautiful rooms in her castle. |
渲染效果如下:
Dorothy followed her through many of the beautiful rooms in her castle (城堡) .
The Witch (女巫) bade her clean the pots and kettles (水壶) and sweep the floor and keep the fire fed (美联储) with wood.
带有其它元素的块引用
块引用可以包含其他 Markdown 格式的元素。并非所有元素都可以使用,你需要进行实验以查看哪些元素有效。
> #### The quarterly results look great! |
渲染效果如下:
The quarterly results look great!
- Revenue was off the chart.
- Profits were higher than ever.
Everything is going according to plan.
块引用用法的最佳实践
为了兼容性,在块引用之前和之后放置空行
Try to put a blank line before |
列表
可以将多个条目组织成有序或无序列表
有序列表
要创建有序列表,请在每个列表项前添加数字并紧跟一个英文句点。数字不必按数学顺序排列,但是列表应当以数字 1 起始。
1. First item |
<ol> |
有序列表用法的最佳实践
CommonMark 和其它几种轻量级标记语言可以让你使用括号()
)作为分隔符(例如 1) First item
),但并非所有的 Markdown 应用程序都支持此种用法,因此,从兼容的角度来看,此用法不推荐。为了兼容起见,请只使用英文句点作为分隔符。
✅ 这样做 | ❌ 尽量不要这样做 |
---|---|
1. First item |
1) First item |
无序列表
要创建无序列表,请在每个列表项前面添加破折号 (-
)、星号 (*
) 或加号 (+
) 。缩进一个或多个列表项可创建嵌套列表。
- First item |
<ul> |
以数字开头的无序列表项
如果你需要以数字开头并且紧跟一个英文句号(也就是 .
)的无序列表项,则可以使使用反斜线(\
)来转义这个英文句号。
- 1968\. A great year! |
<ul> |
无序列表用法的最佳实践
Markdown 应用程序在如何处理同一列表中混用不同分隔符上并不一致。为了兼容起见,请不要在同一个列表中混用不同的分隔符,最好选定一种分隔符并一直用下去。
在列表中添加列表项
Tip: 如果事情没有像期望的那样出现,请仔细检查是否将列表中的元素缩进了四个空格或一个制表符。
要在保留列表连续性的同时在列表中添加另一种元素,请将该元素缩进四个空格或一个制表符,具体操作如下例所示:
段落
* This is the first list item. |
渲染效果如下:
This is the first list item.
Here’s the second list item.
I need to add another paragraph below the second list item.
And here’s the third list item.
引用块
* This is the first list item. |
渲染效果如下:
This is the first list item.
Here’s the second list item.
A blockquote would look great below the second list item.
And here’s the third list item.
代码块
代码块通常采用四个空格或一个制表符缩进。当它们被放在列表中时,请将它们缩进八个空格或两个制表符。
1. Open the file. |
渲染效果如下:
Open the file.
Find the following code block on line 21:
<html> <head> <title>Test</title> </head>
Update the title to match the name of your website.
图片
1. Open the file containing the Linux mascot. |
渲染效果如下:
Open the file containing the Linux mascot.
Marvel at its beauty.
Close the file.
列表
你可以将无序列表嵌套在有序列表中,反之亦然
1. 第一项: |
效果如下:
- 第一项:
- 第一项嵌套的第一个元素
- 第一项嵌套的第二个元素
- 第二项:
- 第二项嵌套的第一个元素
- 第二项嵌套的第二个元素
表格
如需添加表格,请使用三个或更多个连字符(---
)来为每个列创建表头,并使用管道符(|
)来分隔每个列。为兼容考虑,你还应该在行的两侧添加管道符。单元格(cell)宽度是可变的,效果相同
| Syntax | Description | |
渲染效果如下:
Syntax (语法) | Description |
---|---|
Header (标头) | Title |
Paragraph (段) | Text |
对齐
通过在标题行中的连字符( hyphens (字号) )的左侧或右侧或两侧添加冒号(:
),可以将对应列中的文本向左或向右或居中对齐。
| Syntax | Description | Test Text | |
渲染效果如下:
Syntax (语法) | Description | Test Text |
---|---|---|
Header (标头) | Title | Here’s this |
Paragraph (段) | Text | And more |
格式化表格中的文本
可以为表格中的文本设置格式。例如,可以添加 链接、代码 ,但要注意,只能为单词或短语添加反引号 (``),不能添加代码块以及强调。且不支持的格式包括标题(headings)、块引用(blockquotes)、列表(lists)、水平分割线(horizontal rules)、图片(images)或 HTML 标记。
转义表格中出现的管道符
如需在表格中显示管道符 (|
),你可以使用管道符的 HTML 字符编码(|)来实现。
任务列表
任务列表(task lists 或者 checklists (清单) )允许你创建带有复选框的项目列表。在支持任务列表的 Markdown 应用程序中,复选框将显示在内容旁边。要创建任务列表,请在任务列表项前面添加破折号(-
)和中间带空格的方括号([ ]
)。要选中复选框,请在方括号中间添加一个 x
,即([x]
)。
- [x] Write the press release |
效果如下:
- Write the press release
- Update the website
- Contact the media
代码
要将单词或短语表示为代码,请将其包裹在反引号 ( ` ) 中。
Markdown | HTML | 渲染效果 |
---|---|---|
At the command prompt, type `nano`. | At the command prompt, type <code>nano</code>. |
转义反引号
如果你要表示为代码的单词或短语中包含一个或多个反引号,则可以通过将单词或短语包裹在双反引号(````)中。
Markdown | HTML | 渲染效果 |
---|---|---|
``Use `code` in your Markdown file.`` | <code>Use code in your Markdown file.</code> | Use `code` in your Markdown file. |
代码块
要创建代码块,请将代码块的每一行缩进至少四个空格或一个制表符。
<html> |
渲染效果如下:
<html> |
围栏代码块
注意: 要创建不用缩进的代码块,请使用围栏式代码块
Markdown 的基本语法允许通过缩进四个空格或一个制表符来创建代码块。如果觉得不方便,可以试试围栏代码块。根据 Markdown 解析器或编辑器的不同,代码块的前后可以使用三个反引号(```)或三个波浪号(~~~)
来标记围栏代码块,这样就不必费力缩进任何行了!
``` |
渲染效果如下所示:
{ |
语法高亮
许多 Markdown 解析器都支持围栏代码块的语法高亮功能。此功能允许你为编写代码所用的编程语言添加带颜色的语法高亮显示。如需添加语法高亮,请在围栏代码块前的反引号旁指定所用的编程语言。
```json |
效果如下:
{ |
分隔线
要创建分隔线,请在单独一行上使用三个或多个星号 (***
)、破折号 (---
) 或下划线 (___
) ,并且不能包含其他内容。
*** |
以上三个分隔线的渲染效果看起来都一样:
分隔线用法最佳实践
为了兼容性,请在分隔线的前后均添加空白行。
Try to put a blank line before |
链接
要创建链接,请将链接文本括在中括号(例如 [Duck Duck Go]
)中,后面紧跟着括在小括号中的 URL(例如 (https://duckduckgo.com)
)。
司马百度的地址是[百度](https://www.baidu.com/) |
渲染效果如下:
司马百度的地址是百度
添加标题
你可以选择为链接添加标题(即 title 属性)。当用户将鼠标悬停在链接上时,将显示一个提示。要添加标题,请将其放在 URL 后面。
司马百度的地址是[百度](https://www.baidu.com "百度你可快下课吧") |
渲染效果如下:
司马百度的地址是百度
网址和电子邮件地址
要将 URL 或电子邮件地址快速转换为链接,请将其括在尖括号中。
<https://y1xi.vercel.app/> |
渲染效果如下:
https://y1xi.vercel.app/
fake@example.com
格式化链接
如需强调某个链接, 请在中括号前及小括号后添加星号。要将链接表示为代码,请在中括号内添加反引号。
This is the **[以西的小窝](https://y1xi.vercel.app/)** |
渲染效果如下:
This is the 以西的小窝
See the section on code
.
引用式链接
引用式(Reference-style)链接是一种特殊类型的链接,它使得 URL 在 Markdown 中更易于显示和阅读。引用式链接由两部分组成:一部分被放置在正文文本中;另一部分被放置在文档中的其它地方,以便于阅读。
引用式链接第一部分的格式
引用式链接的第一部分的格式由两组中括号组成。第一组中括号内放的是显示为链接的文本,第二组中括号内放的是一个标签,该标签用于指向存放在文档中其它位置的链接。
尽管不是必须的,但你可以在第一组和第二组中括号之间添加一个空格。第二组中括号中的标签不区分大小写,并且可以包含字母、数字、空格或标点符号。
以下示例中,链接的第一部分是等效的:
[hobbit-hole][1] |
引用式链接第二部分的格式
引用式链接的第二部分可以包含以下属性:
- 放在中括号内的标签,以及紧跟在中括号后面的一个冒号和至少一个空格(例如
[label]: test.com
)。 - 链接的 URL,可以选择将其括在尖括号内。
- 链接的标题(可有可无),可以将其括在双引号、单引号或括号内。
以下示例中,链接的第二部分是等效的:
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle |
可以将链接的第二部分放在 Markdown 文档中的任何位置。有些人将它们放在被引用的段落的后面,有些人将它们放在文档的末尾(类似尾注或脚注)。
将两部分组合在一起使用的示例
假设你将一个 URL 作为一个标准 URL链接添加到段落中,在 Markdown 中如下所示:
本篇文章发布在[以西的小窝](https://y1xi.vercel.app/ "以西的Blog") |
尽管它可能指向有趣的附加信息,但显示的 URL 实际上并没有给现有的原始文本添加太多内容,只是使其更难阅读。要解决这个问题,可以像这样格式化 URL:
本篇文章发布在[以西的小窝][1] |
在上述两个实例中,渲染后的输出是相同的:
本篇文章发布在以西的小窝
该链接的 HTML 为:
<a href="https://y1xi.vercel.app/" title="以西的Blog">以西的小窝</a> |
禁止自动将 URL 转换为链接
许多 Markdown 解析器会自动将 URL 转换为链接。这意味着,即使在没有使用中括号的情况下,如果你输入 http://www.example.com,你的 Markdown 解析器也会自动将其转换为链接。
如果你不希望自动将 URL 转换为链接,则可以通过反引号将 URL 表示为代码
`http://www.example.com` |
渲染效果如下:
http://www.example.com
链接的最佳使用实践
不同的 Markdown 应用程序在处理 URL 中间的空格方面是不一样的。为了兼容起见,请尽量使用 %20
(空格的编码形式)来代替空格。
✅ 这样做 | ❌ 不要这样做 |
---|---|
[link](https://www.example.com/my%20great%20page) |
[link](https://www.example.com/my great page) |
HTML 标签
大多 Markdown 应用程序允许你在 Markdown 格式文本中添加 HTML 标签。如果喜欢某些 HTML 标签胜于 Markdown 语法的话进行莫部分操作会非常方便,例如,通过 HTML 标签添加图像更加容易。当你需要更改元素的属性时(例如为文本指定颜色或更改图像的宽度),使用 HTML 标签更方便些。
如需使用 HTML,请将 HTML 标签添加到 Markdown 格式文本中即可。
This **word** is bold. This <em>word</em> is italic. |
渲染效果如下:
This word is bold. This word is italic.
HTML 用法最佳实践
出于安全原因,并非所有 Markdown 应用程序都支持在 Markdown 文档中添加 HTML。如有疑问,请查看 Markdown 应用程序的文档。某些应用程序只支持 HTML 标签的子集。
对于 HTML 的块级元素 <div>
、<table>
、<pre>
和 <p>
,请在其前后使用空行与其它内容进行分隔。尽量不要使用制表符(tabs)或空格(spaces)对 HTML 标签做缩进,否则将影响格式。
在 HTML 块级标签内不能使用 Markdown 语法。例如 <p>italic and **bold**</p>
将不起作用。