MarkDown 写作语法

Markdown 是一种轻量级标记语言,创始人为约翰・格鲁伯。它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的 XHTML(或者 HTML)文档。 这种语言吸收了很多在 电子邮件中已有的纯文本标记的特性。由于 Markdown 的轻量化、易读易写特性,并且对于图片,图表、数学式都有支持,目前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。

Markdown 编辑器

Markdown 有许多优秀的编辑器,下面简单介绍几款,大家用自己常用的就好:

当然,你也可以在 dillingereditor.md等在线 Markdown 编辑器里进行写作练习。

MarkDown 标题

MarkDown 标题的表示非常简单,使用 # 号即可,1-6 级标题可以分别用 1-6 个 # 表示,如下所示:

1
2
3
4
5
6
# 这是一级标题
## 这是二级标题
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题

效果如下所示:

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题
这是六级标题

注意: 当 # 和标题文本之间没有空格时,各 Markdown 应用程序的处理方式是不一样的。为了兼容考虑,请在 # 和标题文本之间添加一个空格。同样,后面提到的绝大多数方法也是如此。

1
2
3
✅ # 这是一级标题

❌ #这是一级标题

MarkDown 段落

  • 段落的前后必须是空行

  • 空行指的是行内什么都没有,或者只有空白符

  • 相邻两行文本,如果中间没有空行 会显示在一行中

若想在段内强制换行,需要使用两个以上空格加上回车

当然也可以使用 HTML 的 <br> 标签来进行换行

如果想在 MarkDown 中插入空格,可以使用如下 HTML 标签:

1
2
3
4
&nbsp;        插入一个空格
&ensp; 插入两个空格
&emsp; 插入四个空格
&thinsp; 插入细空格

文本样式

在强调内容两侧分别加上 * 或者 _即可实现加粗倾斜

1
2
3
4
5
6
7
*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___
~~删除文本~~

效果如下所示:

斜体文本 斜体文本 粗体文本 粗体文本 粗斜体文本 粗斜体文本 删除文本

分割线

可以在一行中使用三个或更多的 *-_ 来添加分隔线(<hr>):

1
2
3
***
------
___

效果如下所示:




MarkDown 列表

无序列表

使用 *+、或 - 标记无序列表

1
2
3
* 可以使用 `*` 作为标记
+ 也可以使用 `+`
- 或者 `-`

效果如下所示:

  • 可以使用 * 作为标记
  • 也可以使用 +
  • 或者 -

注意: *+- 和文字之间有 空格

有序列表

使用 数字 + . 标记有序列表

1
2
3
1. 有序列表以数字和 `.` 开始;
3. 数字的序列并不会影响生成的列表序列;
4. 但仍然推荐按照自然顺序(1.2.3...)编写。

效果如下所示:

  1. 有序列表以数字和 . 开始;

  2. 数字的序列并不会影响生成的列表序列;

  3. 但仍然推荐按照自然顺序(1.2.3…)编写。

注意: 数字 + . 和文字之间有 空格

嵌套的列表

1
2
3
4
5
6
1. 第一层
+ 1-1
+ 1-2
2. 无序列表和有序列表可以随意相互嵌套
1. 2-1
2. 2-2

效果如下所示:

  1. 第一层
    • 1-1
    • 1-2
  2. 无序列表和有序列表可以随意相互嵌套
    1. 2-1
    2. 2-2

MarkDown 引用

在段落或其他内容前使用 > 符号,就可以将这段内容标记为 ’ 引用 ’ 的内容

1
2
3
4
> 这里是引用内容

> 区块引用
>> 嵌套引用

效果如下所示:

这里是引用内容

区块引用

嵌套引用

MarkDown 代码

行内代码

用两个 ` 把中间的代码包裹起来,就可以优雅地引用代码框

1
`Welcome come to EmoryHuang's Blog!`

效果如下所示:

Welcome come to EmoryHuang's Blog!

代码块

代码块使用 4 个空格或者一个制表符(Tab 键),当然也可以通过 ``` 将代码包裹起来

1
2
3
4
5
6
7
8
9
10
11
    public class Welcome {
public static void main(String[] args) {
System.out.println("Welcome come to EmoryHuang's Blog!");
}
}


```js
var sys = require("sys");
sys.puts("Welcome come to EmoryHuang's Blog!");
```

效果如下所示:

1
2
3
4
5
public class Welcome {
public static void main(String[] args) {
System.out.println("Welcome come to EmoryHuang's Blog!");
}
}
1
2
var sys = require("sys");
sys.puts("Welcome come to EmoryHuang's Blog!");

在第一组 ```之后添加代码的语言,如'javascript''js',即可将代码标记为 JavaScript,实现代码高亮

MarkDown 链接

MarkDown 链接有如下两种使用方式:

1
2
3
4
5
[链接名称](链接地址)

或者

<链接地址>

示例如下:

1
2
3
4
5
这是普通链接 [EmoryHuang's Blog](https://emoryhuang.cn/)

这是包含title的链接 [EmoryHuang's Blog](https://emoryhuang.cn/ "EmoryHuang's Blog")

这是自动链接 <https://emoryhuang.cn/>

效果如下所示:

EmoryHuang’s Blog

EmoryHuang’s Blog

https://emoryhuang.cn/

MarkDown 图片

插入图片的语法和插入超链接的语法基本一致,只是在最前面多一个 !

1
![EmoryHuang](https://unpkg.zhimg.com/emoryhuang-static/webp/emoryhuang/banner.webp)

效果如下所示:

EmoryHuang

指定图片的显示大小

Markdown 不支持指定图片的显示大小,不过可以通过直接插入 <img /> 标签来指定相关属性:

1
2
3
4
5
6
7
<img
src="https://unpkg.zhimg.com/emoryhuang-static/webp/emoryhuang/banner.webp"
alt="EmoryHuang"
title="EmoryHuang"
width="50"
height="50"
/>

效果如下所示:

EmoryHuang

MarkDown 表格

使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行:

1
2
3
4
|  表头   | 表头  |
| ---- | ---- |
| 单元格 | 单元格 |
| 单元格 | 单元格 |

效果如下所示:

表头 表头
单元格 单元格
单元格 单元格

对齐

在表头下方的分隔线标记中加入 :,即可标记下方单元格内容的对齐方式:

  • :--- 代表左对齐
  • :--: 代表居中对齐
  • ---: 代表右对齐
1
2
3
4
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

效果如下所示:

左对齐
右对齐
居中对齐
单元格 单元格 单元格
单元格 单元格 单元格

MarkDown 转义字符

Markdown 使用反斜杠(\)转义特殊字符:

1
2
**文本加粗**
\*\* 正常显示星号 \*\*

效果如下所示:

文本加粗

** 正常显示星号 **

MarkDown 使用 HTML 标签

在 Markdown 中插入一些简单的 HTML 代码或 CSS 片段来获得更多扩展,可以使得文章内容更具有多样性。

文字颜色

1
<p style="color: #00b7ff;">这段文字的颜色为 #00b7ff</p>

效果如下所示:

这段文字的颜色为 #00b7ff

文字大小

1
<p style="font-size:0.7em;">这段文字的大小为 0.7em</p>

效果如下所示:

这段文字的大小为 0.7em

文字位置

1
<p style="text-align:center">这段文字居中</p>

效果如下所示:

这段文字居中

details 标签

1
2
3
4
<details>
<summary>点我一下</summary>
<p>Welcome come to EmoryHuang's Blog!</p>
</details>

效果如下所示:

点我一下

Welcome come to EmoryHuang's Blog!

参考