Markdown 是什么?

Markdown 是一种轻量级的标记语言,可用于在纯文本文档中添加格式化元素。Markdown 由 John Gruber 于 2004 年创建,如今已成为世界上最受欢迎的标记语言之一。

使用 Markdown 与使用 WYSIWYG 编辑器不同。在 Microsoft Word 之类的应用程序中,单击按钮以设置单词和短语的格式,并且,更改立即可见。而 Markdown 与此不同,当你创建 Markdown 格式的文件时,可以在文本中添加 Markdown 语法,以指示哪些单词和短语看起来应该有所不同。

例如,要将一个短语表示为标题的话,只须在短语前面添加一个井号即可(例如, # Heading One)。或者要加粗一个短语的话,只须在短语前后各加两个星号即可(例如,**this text is bold**)。可能需要一段时间你才能习惯文本中的 Markdown 语法,尤其是如果你已习惯了所见即所得的应用程序的话。以下屏幕截展示了 Markdown 文件在 Visual Studio Code 编辑器 中的显示效果。

标题(Headings)

要创建标题,请在单词或短语前面添加井号 (#) 。井号的数量代表了标题的级别。例如,添加三个井号即创建一个三级标题 (<h3>) (例如:### My Header)。

Markdown

HTML

渲染效果

# 一级标题

<h1>一级标题</h1>

一级标题

## 二级标题

<h2>二级标题</h2>

二级标题

### 三级标题

<h3>三级标题</h3>

三级标题

#### 四级标题

<h4>四级标题</h4>

四级标题

##### 五级标题

<h5>五级标题</h5>

五级标题

###### 六级标题

<h6>六级标题</h6>

六级标题

可选语法

还可以在文本下方添加任意数量的 == 号来标识一级标题,或者 -- 号来标识二级标题。

Markdown

HTML

渲染效果

一级标题
===============

<h1>一级标题</h1>

一级标题

二级标题
---------------

<h2>二级标题</h2>

二级标题

标题(Heading)用法的最佳实践

当井号(#)和标题文本之间没有空格时,各 Markdown 应用程序的处理方式是不一样的。为了兼容考虑,请在井号和标题文本之间添加一个空格。

✅  这样做

❌  不要这样做

# 这是标题

#这是标题

段落(Paragraphs)

要创建段落,请使用空白行将一行或多行文本进行分隔。

Markdown

HTML

渲染效果

我真的很喜欢用Markdown。

我想从现在开始用它写我所有的文档。

<p>我真的很喜欢用Markdown。</p>

<p>我想从现在开始用它写我所有的文档。</p>

我真的很喜欢用Markdown。

我想从现在开始用它写我所有的文档。

段落(Paragraph)用法的最佳实践

除非 段落在列表中,否则不要用空格(spaces)或制表符( tabs)缩进段落。

✅  这样做

❌  不要这样做

不要在段落前面加标签或空格。

保持线条左对齐,就像这样。

不要在段落前面加标签或空格。

保持线条左对齐,就像这样。

换行(Line Breaks)

在一行的末尾添加两个或多个空格,然后按回车键(return),即可创建一个换行(line break)或新行 (<br>)。

Markdown

HTML

渲染效果

这是第一行。

这是第二行。

<p>这是第一行。<br>

这是第二行。</p>

这是第一行。

这是第二行。

换行(Line Break)用法的最佳实践

几乎每个 Markdown 应用程序都支持两个或多个空格进行换行 (称为 “结尾空格(trailing whitespace)”) 的方式,但这是有争议的,因为很难在编辑器中直接看到空格,并且很多人在每个句子后面都会有意或无意地添加两个空格。由于这个原因,你可能需要使用除结尾空格以外的其它方式来进行换行。如果你所使用的 Markdown 应用程序 支持 HTML 的话,你可以使用 HTML 的 <br> 标签来实现换行。

为了兼容性,请在行尾添加“结尾空格”或 HTML 的 <br> 标签来实现换行。

还有两种其他方式我并不推荐使用。CommonMark 和其它几种轻量级标记语言支持在行尾添加反斜杠 (\) 的方式实现换行,但是并非所有 Markdown 应用程序都支持此种方式,因此从兼容性的角度来看,不推荐使用。并且至少有两种轻量级标记语言支持无须在行尾添加任何内容,只须键入回车键( return)即可实现换行。

✅  这样做

❌  不要这样做

第一行后面有两个空格。

下一行。

第一行后面有HTML标签<br>

下一行。

第一行后面有两个空格。\

下一行。

第一行后面有HTML标签<br>

下一行。

强调(Emphasis)

通过将文本设置为粗体或斜体来强调其重要性。

粗体(Bold)

要加粗文本,请在单词或短语的前后各添加两个星号(asterisks)或下划线(underscores)。如需加粗一个单词或短语的中间部分用以表示强调的话,请在要加粗部分的两侧各添加两个星号(asterisks)。

Markdown

HTML

渲染效果

这是 * *粗体文本* *。

这是 <strong>粗体文本</strong>。

这是 粗体文本。

这是 __ 粗体文本__。

这是 <strong>粗体文本</strong>。

这是 粗体文本。

粗**体文**本

粗<strong>体文</strong>本

体文

粗体(Bold)用法最佳实践

Markdown 应用程序在如何处理单词或短语中间的下划线上并不一致。为兼容考虑,在单词或短语中间部分加粗的话,请使用星号(asterisks)。

✅  这样做

❌  不要这样做

粗**体文**本

粗__ 体文__本

块引用(Blockquotes)

要创建块引用,请在段落前添加一个 > 符号。

> 这是需要引用的内容。

渲染效果如下所示:

这是需要引用的内容。

多个段落的块引用(Blockquotes)

块引用可以包含多个段落。为段落之间的空白行各添加一个 > 符号。

> 这是需要引用的内容。
> 
> 这里也是需要引用的内容。

这是需要引用的内容。

这也是需要引用的内容。

嵌套块引用(Nested Blockquotes)

块引用可以嵌套。在要嵌套的段落前添加一个 >> 符号。

>> 这是需要引用的内容。
>
> 这里也是需要引用的内容。

这里是需要引用的内容。

这里也是需要引用的内容。

带有其它元素的块引用(Blockquotes with Other Elements)

块引用可以包含其他 Markdown 格式的元素。并非所有元素都可以使用,你需要进行实验以查看哪些元素有效。

> #### 这季度业绩看起来很棒!
>
> - 收入超出了图表。
> - 利润比以往任何时候都高。
>
>  一切都在按**计划**进行。

这季度业绩看起来很棒!

  • 收入超出了图表。

  • 利润比以往任何时候都高。

一切都在按计划进行。

带有其它元素的块用法最佳实践

为了兼容性,请在带有其它元素的块前后添加空白行。

✅  这样做

❌  不要这样做

试着在…之前画一个空行

> 这是一个带有其它元素的块

…在带有其它元素的块引用之后。

如果没有空白行,这可能看起来不对。

>这是一个带有其它元素的块

别这样!

列表(Lists)

你可以将多个条目组织成有序或无序列表。

有序列表(Ordered Lists)

要创建有序列表,请在每个列表项前添加数字并紧跟一个英文句点。数字不必按数学顺序排列,但是列表应当以数字 1 起始。

Markdown

HTML

渲染效果

1.第一项

2.第二项

3.第三项

4.第四项

<ol>

<li>第一项</li>

<li>第二项</li>

<li>第三项</li>

<li>第四项</li>

</ol>

1.第一项

2.第二项

3.第三项

4.第四项

1.第一项

1.第二项

1.第三项

1.第四项

<ol>

<li>第一项</li>

<li>第二项</li>

<li>第三项</li>

<li>第四项</li>

</ol>

1.第一项

2.第二项

3.第三项

4.第四项

1.第一项

8.第二项

3.第三项

5.第四项

<ol>

<li>第一项</li>

<li>第二项</li>

<li>第三项</li>

<li>第四项</li>

</ol>

1.第一项

2.第二项

3.第三项

4.第四项

1.第一项

2.第二项

3.第三项

1.缩进的项目

2.缩进的项目

4.第四项

<ol>

<li>第一项</li>

<li>第二项</li>

<li>第三项

<ol>

<li>缩进的项目</li>

<li>缩进的项目</li>

</ol>

</li>

<li>第四项</li>

</ol>

1.第一项

2.第二项

3.第三项

1.缩进的项目

2.缩进的项目

4.第四项

有序列表(Ordered List)用法的最佳实践

CommonMark 和其它几种轻量级标记语言可以让你使用括号())作为分隔符(例如 1) First item),但并非所有的 Markdown 应用程序都支持此种用法,因此,从兼容的角度来看,此用法不推荐。为了兼容起见,请只使用英文句点作为分隔符。

✅  这样做

❌  不要这样做

1.第一项

2.第二项

1) 第一项

2) 第二项

无序列表(Unordered Lists)

要创建无序列表,请在每个列表项前面添加破折号 (-)、星号 (*) 或加号 (+) 。

Markdown

HTML

渲染效果

- 第一项

- 第二项

- 第三项

- 第四项

<ul>

<li>第一项</li>

<li>第二项</li>

<li>第三项</li>

<li>第四项</li>

</ul>

  • 第一项

  • 第二项

  • 第三项

  • 第四项

* 第一项

* 第二项

* 第三项

* 第四项

<ul>

<li>第一项</li>

<li>第二项</li>

<li>第三项</li>

<li>第四项</li>

</ul>

  • 第一项

  • 第二项

  • 第三项

  • 第四项

+ 第一项

+ 第二项

+ 第三项

+ 第四项

<ol>

<li>第一项</li>

<li>第二项</li>

<li>第三项</li>

<li>第四项</li>

</ol>

  • 第一项

  • 第二项

  • 第三项

  • 第四项

以数字开头的无序列表项

如果你需要以数字开头并且紧跟一个英文句号(也就是 .)的无序列表项,则可以使使用反斜线(\)来 转义 这个英文句号。

Markdown

HTML

渲染效果

- 1968\. 是伟大的一年!

-我认为1969年是第二好的。

<ul>

<li>1968. 是伟大的一年!</li>

<li>我认为1969年是第二好的。</li>

</ul>

  • 1968. 是伟大的一年!

  • 我认为1969年是第二好的。

无序列表(Unordered List)用法的最佳实践

Markdown 应用程序在如何处理同一列表中混用不同分隔符上并不一致。为了兼容起见,请不要在同一个列表中混用不同的分隔符,最好选定一种分隔符并一直用下去。

✅  这样做

❌  不要这样做

- 第一项

- 第二项

- 第三项

- 第四项

+ 第一项

* 第二项

- 第三项

+ 第四项

在列表中添加列表项

要在保留列表连续性的同时在列表中添加另一种元素,请将该元素缩进四个空格或一个制表符,如下例所示:

段落(Paragraphs)

* 这是第一项。
* 这是第二项。
    我需要在第二个列表项下方添加另一段。
* 这是第三项。

渲染效果如下:

  • 这是第一项。

  • 这是第二项。

我需要在第二个列表项下方添加另一段。

  • 这是第三项

引用块(Blockquotes)

* 这是第一项。
* 这是第二项。
    引用块在第二个列表项下方看起来很棒。
* 这是第三项。

渲染效果如下:

  • 这是第一项。

  • 这是第二项。

引用块在第二个列表项下方看起来很棒。

  • 这是第三项。

代码

要将单词或短语表示为代码,请将其包裹在反引号 (`) 中。

Markdown

HTML

渲染效果

在命令提示符下,键入`nano`。

在命令提示符下,键入<code>nano</code>。

在命令提示符下,键入nano

代码块(Code Blocks)

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

    <html>
      <head>
      </head>
    </html>

渲染效果如下:

<html>
  <head>
  </head>
</html>

⚠️注意: 要创建不用缩进的代码块,请使用 围栏式代码块(fenced code blocks)。

分隔线(Horizontal Rules)

要创建分隔线,请在单独一行上使用三个或多个星号 (***)、破折号 (---) 或下划线 (___) ,并且不能包含其他内容。

***

---

_________________

以上三个分隔线的渲染效果看起来都一样:




分隔线(Horizontal Rule)用法最佳实践

为了兼容性,请在分隔线的前后均添加空白行。

✅  这样做

❌  不要这样做

试着在前面放一个空白行

---

在水平线之后。

如果没有空行,这将是一个标题。

---

不要这样做!

链接(Links)

要创建链接,请将链接文本括在方括号(例如 [小橙子])中,后面紧跟着括在圆括号中的 URL(例如 (https://anorange.icu) )。

我最喜欢的博客是[小橙子](https://anorange.icu)。

渲染效果如下:

我最喜欢的博客是小橙子

添加标题

你可以选择为链接添加标题(即 title 属性)。当用户将鼠标悬停在链接上时,将显示一个提示。要添加标题,请将其放在 URL 后面并用引号括起来。

我最喜欢的博客是[小橙子](https://anorange.icu "最具特色的个人博客")。

渲染效果如下:

我最喜欢的博客是小橙子

网址和电子邮件地址

要将 URL 或电子邮件地址快速转换为链接,请将其括在尖括号中。

<https://anorange.icu>
<cheny012022@163.com>

渲染效果如下:

https://anorange.icu

cheny012022@163.com

图片(Images)

要添加图片的话,首先请添加感叹号(!),然后紧跟着是方括号,方括号中可添加备用文本(alt text,即图片显示失败后显示此文本),最后跟着圆括号,圆括号中添加图片资源的路径或 URL。你可以选择在圆括号中的路径或 URL 之后添加标题(即 title 属性)。

![这些猫好漂亮!](https://cdn.anorange.icu/anorange/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250212212902.jpg "猫猫图片")

渲染效果如下:

这些猫好漂亮!

⚠️注意: 要了解如何调整图片大小,请参阅halo文章编辑页面。

带链接的图片

要为图片添加链接,请先为图片的 Markdown 标记添加一个方括号,然后紧跟着一个圆括号,并在圆括号中添加链接地址。

[![这些猫好漂亮!](https://cdn.anorange.icu/anorange/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250212212902.jpg, 猫猫图片")](https://anorange.icu)

渲染效果如下:

微信图片_20250212212902.jpg

插入网易云音乐播放模块

核心代码:

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="100%" height="100" src="https://music.163.com/outchain/player?type=2&amp;id=1819086509&amp;auto=1&amp;height=100"></iframe>

效果如下:

插入bilibili视频

核心代码:

<iframe src="//player.li.com/player.html?aid=59317437&bvid=BV1Pt411G7qh&cid=103365806&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

渲染效果:

如果你觉得文章对你有帮助,请帮忙点个赞😀