基础

更新说明

• 维护人员：码小趣 (www.maxiaoqu.com)
• 维护日期：2024-03-26T14:21:53.000Z
• 最后维护人员：码小趣 (www.maxiaoqu.com)
• 最后维护日期：2024-03-26T14:22:00.000Z

VitePress 使用 markdown-it 作为解析器，并使用 Shiki 来突出显示语言语法

标题

以 # 号开头，后面至少一个空格，和H1~H6一样的

示例代码：

# 一级标题

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题

点我查看

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

标题锚

标题会自动应用锚链接

说明

[] 中括号内文字随便输，() 括号里的填一个 # 号加标题

无论是几级标题，都是一个 # 号

示例代码：

[点我跳转：图片引用](#图片引用)

输出结果：

点我跳转：图片引用

列表

列表用的比较多了，逐一来讲

无序列表

以 * 或 + 或 - 开头，后面至少一个空格，标识为实心●圆点

示例代码：

* 这是第1句

+ 这是第2句

- 这是第3句

输出结果：

• 这是第1句

• 这是第2句

• 这是第3句

有序列表

全部使用 1. 即可，生成的时候会自增

说明

也可手动使用 1. 、2. 、3.

示例代码：

1. 我的天哪
1. 这么神奇
1. 小岳岳

输出结果：

1. 我的天哪
2. 这么神奇
3. 小岳岳

图片引用

这里涉及到一个相对路径 ./ 和 绝对路径 /

建议

对于指向内部 Markdown 文件的链接，尽可能使用相对路径，而不是绝对路径

示例代码：

<!-- 相对路径，目标文件相对于本文章所在位置 -->
![LOGO](./public/logo.png)

<!-- 绝对路径，目标文件就是真实路径在哪 -->
![LOGO](/public/logo.png)

输出结果：

说明

由于public文件夹的特殊性，我们直接使用 ![LOGO](/logo.png) 即可

其他文件夹请遵从上面的使用规则

超链接

分为内部和外部链接，且默认情况下，生成链接带有 .html后缀

内部链接引用

示例代码

[点我跳转：开发环境准备](./guide/use-environment.md)

输出结果：

点我跳转：开发环境准备

外部链接引用

示例代码：

* [vuejs.org](https://vuejs.org/)

* [GitHub 上的 VitePress](https://github.com/vuejs/vitepress)

输出结果：

• vuejs.org

• GitHub 上的 VitePress

引用

引用比较简单，符号是 >，可以多层嵌套

示例代码：

> 青玉案·元夕
>> 辛弃疾
>>> 东风夜放花千树。更吹落、星如雨。宝马雕车香满路。凤箫声动，玉壶光转，一夜鱼龙舞。
> > > 蛾儿雪柳黄金缕。笑语盈盈暗香去。众里寻他千百度。蓦然回首，那人却在，灯火阑珊处。

输出结果：

青玉案·元夕

辛弃疾

东风夜放花千树。更吹落、星如雨。宝马雕车香满路。凤箫声动，玉壶光转，一夜鱼龙舞。 蛾儿雪柳黄金缕。笑语盈盈暗香去。众里寻他千百度。蓦然回首，那人却在，灯火阑珊处。

字体

字体的格式也有些多，放在一起吧，符号后无空格

*斜体字*

**粗体字**

~~删除线~~

`高亮`

<u>下划线</u>

<span style="border-bottom:2px dashed yellow;">加下划线用的是html代码</span>

输出结果：

斜体字

粗体字

~~删除线~~

高亮

下划线

加下划线用的是html代码

表格

示例代码：

| 名字 | 性别 | 年龄 | 部门 |
|:-:|:-:|:-:|:-:|
| 张三 | 男 | 21 | 产品 |
| 李四 | 女 | 18 | 开发 |

输出结果：

名字	性别	年龄	部门
张三	男	21	产品
李四	女	18	开发