markdown语法

我们可以用简单的纯文本格式来编写文档，但需要遵守一定的规则，这就是 markdown 语法，文件后缀为.md。

在VSCode中，当编辑 md 文件时，点击右上角的预览按钮，可以实时看到它的效果。

想要了解详细的 markdown 语法，可以参考 markdown 教程。下面介绍常用的 markdown 语法。

# 标题

要创建一个标题，需要在标题前面添加井号#，井号的数量代表了标题的级别。

例如本节标题的写法为## 标题，注意#和标题之间由一个空格隔开。

## 标题

提示

一级标题#已被文章大标题占用，只有二级及以下的标题会被系统自动录入侧边栏目录，即大于等于两个#的标题。

# 列表

<!-- 无序列表 -->
* First item
* Second item
* Third item
* Fourth item

<!-- 有序列表 -->
1. First item
2. Second item
3. Third item
4. Fourth item

<!-- 和标题一样，注意中间需要有一个空格。 -->

# 代码

如果只要插入代码片段的话，可以用两个反引号`包裹起来（在键盘左上角）。

`print()`

如果想插入整段代码的话，可以用两个```（三个反引号）将代码块包裹起来，并且可以在下面markdown的位置指定其他语言类型。

``` markdown
<!-- 源代码 -->
```

# 链接

要想插入一个链接，例如本网站的首页，可以使用如下代码：

[文字](链接)

# 图片

用 markdown 插入图片的方法:

![文字](链接)

用HTML插入图片的方法：

<img :src="$withBase('/XXX.png')" style="zoom:80%;" />

XXX.png图片只需要将其放入/blog/.vuepress/public/路径下即可。

TIP

建议用图床，比较方便，可以省去很多麻烦。

# 目录

输入

[[toc]]

输出

标题
列表
代码
链接
图片
目录
Emoji
提示框
Badge标签标签标签
Code Groups 代码块分组进阶
反引号嵌套进阶
数学公式插件支持
图表插件支持

# Emoji

Emoji 由两个:组成。

输入

:tada: :100:

输出

🎉 💯

可以在这里找到所有可用的Emoji。

也可以直接插入输入法的 Emoji 😇🥰

# 提示框

提示框由两个:::组成，并在第一个:::后指定类型info/tip/warning/danger/details，代表提示框的颜色，并在类型后指定标题（可选）。

输入

::: info 信息
这是一个信息
:::

::: tip 提示
这是一个提示
:::

::: warning 警告
这是一个警告
:::

::: danger 危险
这是一个危险警告
:::

::: details 点击展开详情
这是一个详情块，在 IE / Edge 中不生效
:::

输出

信息

这是一个信息

提示

这是一个提示

警告

这是一个警告

危险

这是一个危险警告

点击展开详情

这是一个详情块，在 IE / Edge 中不生效

# Badge标签标签标签

text - string
type - string, 可选值："tip"|"warning"|"error"，默认值是："tip"
vertical - string, 可选值："top"|"middle"，默认值是："top"

## Badge<Badge text="标签" type="tip"/>

# Code Groups 代码块分组进阶

代码


<code-group>

<code-block title="YARN" active>
```bash
yarn install
```
</code-block>

<code-block title="NPM">
```bash
npm install
```
</code-block>

</code-group>

# 反引号嵌套进阶

反引号就是`

想要输出`，代码为

`` ` ``

想要在代码块中表示```（如上面 Code Groups 代码所示），代码为

````
```
````

简单来说，就是外层的反引号数要比内层的反引号数多一个（当然，严格来说只要内外层的反引号个数不同就行）

# 数学公式插件支持

行内公式： $E = mc^2$

行块公式：

$i\hbar\frac{\partial \psi}{\partial t} = \frac{-\hbar^2}{2m} ( \frac{\partial^2}{\partial x^2} + \frac{\partial^2}{\partial y^2} + \frac{\partial^2}{\partial z^2} ) \psi + V \psi.$

代码

行内公式：$E = mc^2$

行块公式：
$$
i\hbar\frac{\partial \psi}{\partial t} = \frac{-\hbar^2}{2m} ( \frac{\partial^2}{\partial x^2} + \frac{\partial^2}{\partial y^2} + \frac{\partial^2}{\partial z^2} ) \psi + V \psi.
$$

# 图表插件支持

代码

```chart
{
  "type": "doughnut",
  "data": {
    "datasets": [{
      "data": [10, 20, 30],
      "backgroundColor": [
        "rgba(255, 99, 132)",
        "rgba(255, 206, 86)",
        "rgba(54, 162, 235)"
      ]
    }],
    "labels": ["Red", "Yellow", "Blue"]
  }
}
```

代码

```chart
{
  "type": "bar",
  "data": {
    "labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    "datasets": [{
      "label": "# of Votes",
      "data": [12, 19, 3, 5, 2, 3],
      "backgroundColor": [
        "rgba(255, 99, 132, 0.2)",
        "rgba(54, 162, 235, 0.2)",
        "rgba(255, 206, 86, 0.2)",
        "rgba(75, 192, 192, 0.2)",
        "rgba(153, 102, 255, 0.2)",
        "rgba(255, 159, 64, 0.2)"
      ],
      "borderColor": [
        "rgba(255, 99, 132, 1)",
        "rgba(54, 162, 235, 1)",
        "rgba(255, 206, 86, 1)",
        "rgba(75, 192, 192, 1)",
        "rgba(153, 102, 255, 1)",
        "rgba(255, 159, 64, 1)"
      ],
      "borderWidth": 1
    }]
  },
  "options": {
    "scales": {
      "yAxes": [{
        "ticks": {
          "beginAtZero": true
        }
      }]
    }
  }
}
```