什么是 Markdown

Markdown 是一种可标记语言,通过简单的标记,可以将纯文本内容转为内容丰富的 HTML 网页,实现字体加粗,链接,插入图片等等纯文本无法实现的功能。

Markdown 类似编程语言,需要先编写,然后通过渲染器把 Markdown 源文件转为内容丰富的 HTML 网页(类似于编程语言的编译器,把一种语言翻译为另外一种语言)。

Markdown 优点

采用 Markdown 生成的文档,格式规范,清晰明了,避免了纯文本文件无法对文本格式进行控制的尴尬,是书写技术文档的最佳选择之一。同时,Markdown 又不像网页那样复杂,仅仅使用简单的语法,就能生成丰富的内容,这也是 Markdown 流行的原因。

具体语法

本部分介绍常用的 Markdown 语法,由于 Markdown 类似编程语言,因此对书写格式有一定要求,符合要求才能生成想要的结果,书写时候一定要遵循规范。

标题(heading)

Markdown 中的标题采用 # 来标志,# 后面跟具体的标题文本。# 的个数代表标题级别:1 个 # 代表一级标题,2 个 # 代表二级标题,以此类推。

注意点

  • # 与标题的文本之间,需要留一个空格,否则可能无法正常渲染为标题样式
  • 标题级别不要太多,五六级标题与正文文本字体大小区别已经不大,因此意义也不大

效果展示与源代码

源代码:

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

生成的标题效果为:

markdown_heading.png

列表

Markdown 中的列表,分为有序列表以及无序列表两种。

  • 对于有序列表,使用数字开头,后面跟 .(英文的句号),空格,后面写上该步骤内容。
  • 对于无序列表,使用 + 或者 - 开头,空格,后面写具体内容。

你也可以创建多级嵌套列表,在某一级别下另起一行,缩进四个空格开始更低级别。

注意点

  • 列表项前面需要空一行,否则某些 Markdown 渲染器无法正常识别列表
  • 列表标志后面需空格

效果展示与源代码

源代码:

1. 有序列表,这是步骤一
    1. 步骤 1.1
        1. 步骤 1.1.1
        2. 步骤 1.1.2
        3. 步骤 1.1.3
    2. 步骤 1.2
    3. 步骤 1.3
2. 有序列表,这是步骤二
    1. 步骤 2.1
    2. 步骤 2.2
3. 有序列表,这是步骤三

+ 车
    + 汽车
        + BMW
        + BYD
    + 火车
        + 普通列车
        + 动车
        + 高铁
    + 自行车
+ 动物
    + 猴子
    + 骆驼
    + 大象
+ 人
    + 白人
    + 黑人
        + 非洲黑人
        + 美洲黑人
        + 亚洲黑人
    + 黄人

生成的列表效果如下图:

markdown_list.png

强调与着重表示

要使用*斜体*,可以使用一对 * 或者 _包围要斜体的文字;要加粗文字,使用两对 * 或者 _ 包围文字。

如何既斜体又加粗文字?*_ 交替使用即可,*像这样*,或者 这样

以上文字源代码为:

要使用*斜体*,可以使用一对 `*` 或者 `_`包围要斜体的文字;要**加粗文字**,使用两对 `*` 或者 `_` 包围文字。

如何既斜体又加粗文字?`*` 与 `_` 交替使用即可,*__像这样__*,或者 _**这样**_ 。

注意点

  • 使用 _ 进行斜体或者着重表示,可能需要和周围文字之间加上空格,否则无法正常渲染,建议使用 *

链接

可以给文字加上链接,链接的格式为 [](),方括号内填写希望显示的文字,圆括号内填写该文字具体链接的网页地址。

例如,我们不可以访问谷歌YouTube。直接书写网页地址也可以, 用 <> 包含网页,像这样,https://www.google.com/

可以给文字加上链接,链接的格式为 `[]()`,方括号内填写希望显示的文字,圆括号内填写该文字具体链接的网页地址。

例如,我们不可以访问[谷歌](https://www.google.com/)和 [YouTube](https://www.youtube.com)。直接书写网页地址也可以,
用 `<>` 包含网页,像这样,<https://www.google.com/>。

代码块与代码段

Markdown 中可以写 inline code 以及 code block,inline code 使用一对 ` (backtick 键)包含,sell = np.sin(time)。code block 使用三个 ` 开始与结束。

import matplotlib
matplotlib.use('agg')
import matplotlib.pyplot as plt
import numpy as np

print("hello")
for i in range(10):

    print(i)

x = np.linspace(0, 4, 100)
y = np.sin(x)
fig, ax = plt.subplots()

ax.plot(x, y)
plt.savefig('test.png')

上述代码块源代码为

```python
import matplotlib
matplotlib.use('agg')
import matplotlib.pyplot as plt
import numpy as np

print("hello")
for i in range(10):

    print(i)

x = np.linspace(0, 4, 100)
y = np.sin(x)
fig, ax = plt.subplots()

ax.plot(x, y)
plt.savefig('test.png')
```

图片

可以在 Markdown 中使用图片,格式为 ![Image_caption](Image_link)。有两种方式来引用图片:

  1. 本地图片:直接写上图片绝对路径或者相对当前 Markdown 文件的相对路径
  2. 网络图片:直接写上图片链接即可

这是一张网络图片

以上图片对应的源代码如下:

![这是一张网络图片](https://assets-cdn.github.com/images/modules/logos_page/Octocat.png)

注意点

如果图片的链接为本地路径,Markdown 文件移动到其它地方,或者分享给他人以后,图片将不能显示。 可以使用一些图床1来存放图片,保证在哪里都能显示图片。 或者,尽量不在 Markdown 里使用图片。

表格

Markdown 中也可以书写简单的表格:

姓名 数学 语文
张三 1 2
李四 3 4

生成上述表格的源代码为:

|姓名|数学|语文|
|---|---|---|
|张三| 1| 2 |
|李四| 3| 4 |

编辑与预览

推荐几款编辑与预览的编辑器,VNote,Sublime Text 与 Visual Stuido Code

Vnote

Vnote 是国人开发的 Markdown 笔记软件,专为 Markdown 设计,可以方便编写 Markdown 文件, 进行预览,对文件进行管理等。

Visual Stuido Code

安装 Visual Studio Code,VScode 原生支持 Markdown 文件预览,无需安装插件,按 Ctrl+K,再按 V,会在 当前编辑窗口的右边打开文件预览窗口,可以实时查看生成的 HTML 文件效果。 更多指导,请查看 官方文档

Sublime Text

安装 Sublime Text,并且安装插件 Markdown Preview

写好 Markdown 以后,直接使用快捷键 Ctrl+Shift+M 打开浏览器预览生成的 HTML 网页效果。

参考资料


  1. 所谓*图床*,简单来说,就是存储图片的网络空间,这样不管身在何处,只要有网络,就可以看到图片。