VitePress
安装
$ pnpm add -D vitepress表格
```
| 左对齐 | 居中对齐 | 右对齐 |
| ------------- | :-----------: | ----: |
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
```表情
输入：
:tada: :100:输出：
🎉 💯
可以在这里查看所有的表情。
生成目录
在 md 文件中输入下面的代码即可生成带有层级的标题目录。
[[toc]]可以在配置文件中设置 markdown.toc，以控制显示目录的层级。
自定义容器
::: info
This is an info box.
:::
::: tip
This is a tip.
:::
::: warning
This is a warning.
:::
::: danger
This is a dangerous warning.
:::
::: details
This is a details block.
:::你还可以自定义标题：
::: danger STOP
Danger zone, do not proceed
:::在代码块中的语法高亮
VitePress 使用 Shiki 将 Markdown 和 代码块中的语法文本变得高亮和多彩。Shiki 支持广泛的编程语言，你只需要在三反引号后面写上正确的编程别名。
你可以在这个列表里查看所有有效的编程别名。
```js
export default {
name: 'MyComponent',
// ...
}
```高亮代码块中的若干行
在编程别名后面写一个花括号，再在里面写上高亮的行数。
```js{4} // [!code hl]
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
```花括号里面也可以是其它值：
- 行范围：比如
{5-8}，{3-10}, {10-17} - 多个单行：比如
{4,7,9} - 行范围和单行：比如
{4,7-13,16,23-27,40}
还有种办法，你可以直接在代码的一行最后面加上 // [!code hl] 注释。
输入：
```js
export default {
data () {
return {
msg: 'Highlighted!' // [!code hl]
}
}
}
```聚焦代码块中的若干行
在一行代码的最后面添加注释 // [!code focus]，会聚焦这行代码并且模糊其它的部分代码。
如果需要聚焦多行请使用 // [!code focus:<lines>]，多了 :<lines>。
```js
export default {
data () {
return {
msg: 'Focused!' // [!code focus]
}
}
}
```其它代码块的高亮注释
// [!code --] 和 // [!code ++] 用于对比。
```js
export default {
data () {
return {
msg: 'Removed' // [!code --]
msg: 'Added' // [!code ++]
}
}
}
```// [!code warning] 和 // [!code error] 用于提示错误或警告。
```js
export default {
data () {
return {
msg: 'Error', // [!code error]
msg: 'Warning' // [!code warning]
}
}
}
```显示代码块行数
export default {
markdown: {
lineNumbers: true
}
}还可以使用 :line-numbers / :no-line-numbers 来设置代码块是否显示行数，这种办法优先级最高。
```ts {1}
// line-numbers is disabled by default
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```
```ts:line-numbers {1}
// line-numbers is enabled
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```将某个文件的内容显示为代码块
你可以像下面这样将某个文件的内容显示为代码块。
在这里 @ 的值相当于项目的源码目录的根路径。
<<< @/filepath
<<< ./filepath如果需要设置行高亮：
<<< @/filepath{highlightLines}
<<< ./filepath{highlightLines}如果你只想显示文件中内容的某一具体部分，可以使用 VS Code region 语法来达到目的。
首先文件内容的某一具体部分用 region 语法包裹起来。
代码文件：
// #region myFn
function foo() {
}
// #endregion myFn
export default foo然后在 .md 文件里导入的时候在路径后面拼接井号 # 和自定义的 region 名。
<<< @/snippets/snippet-with-region.js#snippet{1}另外，支持你明确的指定文件内容编程语言：
<<< @/snippets/snippet.cs{c#}
<!-- 带有高亮：-->
<<< @/snippets/snippet.cs{1,2,4-6 c#}
<!-- 显示行号：-->
<<< @/snippets/snippet.cs{1,2,4-6 c#:line-numbers}代码分组
你可以像这样将不同的多个代码块分为不同的组：
::: code-group
```js [config.js]
const config = {
}
export default config
```
```ts [config.ts]
import type { UserConfig } from 'vitepress'
const config: UserConfig = {
}
export default config
```
:::包含 Markdown 文件
你可以使用 <!--@include: ./xxx.md--> 语法使一个 markdown 文件中包含另一个 markdown 文件：
# Docs
## Basics
<!--@include: ./parts/basics.md-->使用原封不动的静态资源
你可能需要使用原封不动的静态资源，比如这些文件 robot.txt，favicons，PWA icons。
你可以把这些文件放在源码目录的 public 目录下面。
比如，如果你的项目根目录是 ./docs 并且使用默认的资源目录位置，那么你的 public 目录将是 ./docs/public。
被放置到 public 的资源将会被复制到输出目录的根目录。
使用绝对根路径来引用放置在 public 目录里的文件。比如，在源代码中总是以 /icon.png 的形式来引入 public/icon.png 资源。
基础 URL
如果你的站点被部署到一个非根路由，你将需要在 .vitepress/config.js 中设置 base 选项。
比如，你计划部署你的站点到 https://foo.github.io/bar/，那么 base 应该设置为 '/bar/'（它的开头和结尾应该都是斜杠）。
所有你的静态资源路由将被自动处理以适应不同的 base 配置值。比如，你的 markdown 引用了在 public 目录下的资源，但是你不需要画蛇添足的加上 /base/。
但如果你要动态引入资源，可以使用 VitePress 提供的 withBase 辅助器。
<script setup>
import { withBase, useData } from 'vitepress'
const { theme } = useData()
</script>
<template>
<img :src="withBase(theme.logoPath)" />
</template>