MarkDown 写作语法

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

Markdown 编辑器

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

当然，你也可以在 dillinger、editor.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!

参考