Markdown 教程

Markdown 基本语法/扩展

标题

不同数量的#可以完成不同的标题，如下

# 一级标题

## 二级标题

### 三级标题

### 2.2 字体

粗体、斜体、粗体和斜体，删除线，需要在文字前后加不同的标记符号。如下

输入：

**这个是粗体**

*这个是斜体*

***这个是粗体加斜体***

~~这里是删除线~~

`高亮`

<u>下划线</u>

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

输出：

这个是粗体
这个是斜体
这个是粗体加斜体
~~这里是删除线~~
高亮
下划线
加下划线用的是html代码

注：

如果想给字体换颜色、字体或者居中显示，需要使用内嵌HTML来实现。

锚点

格式：

[说明文字](#要跳转的位置)

注：

不管是几级标题都只需要一个 "#"

输入：

[跳转到插入图片](#插入图片)

输出：

转跳到插入图片

自定义锚点

要为标题指定自定义锚点而不是使用自动生成的锚点，请向标题添加后缀：

# 使用自定义锚点 {#my-anchor}

这允许将标题链接为 #my-anchor，而不是默认的 #使用自定义锚点。

分隔线

要创建分隔线，请在单独一行上使用三个或多个星号 (***)、破折号 (---) 或下划线 (___) ，并且不能包含其他内容。

输入：

***

---

_________________

输出：

注：

以上三个分隔线的渲染效果看起来都一样

Badge组件

徽章可让您向标题添加状态

输入：

* VitePress <Badge type="info" text="default" />
* VitePress <Badge type="tip" text="^1.9.0" />
* VitePress <Badge type="warning" text="beta" />
* VitePress <Badge type="danger" text="caution" />

输出：

VitePress default
VitePress ^1.9.0
VitePress beta
VitePress caution

你也可以自定义 children

输入：

* VitePress <Badge type="info">custom element</Badge>

输出：

VitePress custom element

也可以通过覆盖 css 变量来自定义徽章的 background-color

默认值：

点击查看css变量

var的值都改程颜色代码即可

例如：--vp-badge-info-border: #ffffff;

:root {
  --vp-badge-info-border: transparent;
  --vp-badge-info-text: var(--vp-c-text-2);
  --vp-badge-info-bg: var(--vp-c-default-soft);

  --vp-badge-tip-border: transparent;
  --vp-badge-tip-text: var(--vp-c-tip-1);
  --vp-badge-tip-bg: var(--vp-c-tip-soft);

  --vp-badge-warning-border: transparent;
  --vp-badge-warning-text: var(--vp-c-warning-1);
  --vp-badge-warning-bg: var(--vp-c-warning-soft);

  --vp-badge-danger-border: transparent;
  --vp-badge-danger-text: var(--vp-c-danger-1);
  --vp-badge-danger-bg: var(--vp-c-danger-soft);
}

Emoji 🎉

输入：

:white_check_mark:
:x:
:copyright:
:registered:
:construction:

输出：

✅ ❌ ©️ ®️ 🚧

更多：Emoji

无序列表

无序列表的使用，在符号-后加空格使用。如下

输入：

- 无序列表 1
- 无序列表 2
- 无序列表 3

输出：

无序列表 1
无序列表 2
无序列表 3

如果要控制列表的层级，则需要在符号-前使用空格。如下

输入：

- 无序列表 1
- 无序列表 2
  - 无序列表 2.1
  - 无序列表 2.2

输出：

无序列表 1
无序列表 2
- 无序列表 2.1
- 无序列表 2.2

有序列表

点击查看

有序列表的使用，在数字及符号.后加空格后输入内容，如下

输入：

1. 有序列表 1
2. 有序列表 2
3. 有序列表 3

输出：

有序列表 1
有序列表 2
有序列表 3

引用

引用的格式是在符号>后面书写文字。如下

输入：

> 人还是无法忍受孤独的。

> 自己来选择，不会后悔的道路。

输出：

人还是无法忍受孤独的。

自己来选择，不会后悔的道路。

多个段落的块引用

点击查看

块引用可以包含多个段落。为段落之间的空白行添加一个 > 符号

> 人还是无法忍受孤独的。
> 
> 自己来选择，不会后悔的道路。

人还是无法忍受孤独的。
自己来选择，不会后悔的道路。

嵌套块引用

点击查看

块引用可以嵌套。在要嵌套的段落前添加一个 >> 符号。

> 人还是无法忍受孤独的。
> 
>> 自己来选择，不会后悔的道路。

人还是无法忍受孤独的。
自己来选择，不会后悔的道路。

注：

引用可以包含其他 Markdown 格式的元素。并非所有元素都可以使用，你需要进行实验以查看哪些元素有效。

围栏代码块

在代码块之前和之后的行上使用三个反引号（```）或三个波浪号（~~~）。

输入：

```
(,,･∀･)ﾉ゛hello

```

输出：

(,,･∀･)ﾉ゛hello

代码块中的语法高亮

VitePress 使用 Shiki 在 Markdown 代码块中使用彩色文本实现语法高亮。Shiki 支持多种编程语言。需要做的就是将有效的语言别名附加到代码块的开头：

输入：

```js
export default {
  name: 'MyComponent',
  // ...
}
```

```html
<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>
```

输出：

export default {
  name: 'MyComponent',
  // ...
}

html

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>

在 Shiki 的代码仓库中，可以找到合法的编程语言列表。

还可以全局配置中自定义语法高亮主题。有关详细信息，参见 markdown 选项得到更多信息。

在代码块中实现行高亮

输入：

```js{2}
contact_info = {
    "name": "XSJYA",
    "email": "i@xsjya.cn"
}
```

输出：

contact_info = {
    "name": "XSJYA",
    "email": "i@xsjya.cn"
}

除了单行之外，还可以指定多个单行、多行，或两者均指定：

多行：例如 {5-8}、{3-10}、{10-17},
多个单行：例如 {4,7,9},
多行与单行：例如 {4,7-13,16,23-27,40},

输入：

```js{1,4,6-8}
export default { // Highlighted
  data () {
    return {
      msg: `Highlighted!
      This line isn't highlighted,
      but this and the next 2 are.`,
      motd: 'VitePress is awesome',
      lorem: 'ipsum'
    }
  }
}
```

输出：

export default { // Highlighted
  data () {
    return {
      msg: `Highlighted!
      This line isn't highlighted,
      but this and the next 2 are.`,
      motd: 'VitePress is awesome',
      lorem: 'ipsum'
    }
  }
}

也可以使用 // [!code highlight] 注释实现行高亮。

输入：

```js
export default {
  data () {
    return {
      msg: 'Highlighted!' //[!code highlight]
    }
  }
}
```

注意

//后面有空格此处方便演示我删掉了

输出：

export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}

代码块中的颜色差异

在某一行添加 // [!code --] 或 // [!code ++] 注释将会为该行创建 diff，同时保留代码块的颜色。

输入:

```js
export default {
  data () {
    return {
      msg: 'Removed' //[!code --]
      msg: 'Added' //[!code ++]
    }
  }
}
```

注意

//后面有空格此处方便演示我删掉了

输出：

export default {
  data () {
    return {
      msg: 'Removed'
      msg: 'Added'
    }
  }
}

高亮“错误”和“警告”

在某一行添加 // [!code warning] 或 // [!code error] 注释将会为该行相应的着色。

输入：

```js
export default {
  data () {
    return {
      msg: 'Error', //[!code error]
      msg: 'Warning' //[!code warning]
    }
  }
}
```

注意

//后面有空格此处方便演示我删掉了

输出：

export default {
  data () {
    return {
      msg: 'Error', 
      msg: 'Warning'
    }
  }
}

代码块中聚焦

在某一行上添加 // [!code focus] 注释将聚焦它并模糊代码的其他部分。

此外，可以使用 // [!code focus:<lines>] 定义要聚焦的行数。

输入：

```js
export default {
  data () {
    return {
      msg: 'Focused!' // [!code focus]
    }
  }
}
```

注意

//后面有空格此处方便演示我删掉了

输出：

export default {
  data () {
    return {
      msg: 'Focused!'
    }
  }
}

代码组

输入：

::: code-group
``` [pnpm]
#查询pnpm版本
pnpm -v
```
``` [yarn]
#查询yarn版本
yarn -v
```
:::

输出：

pnpmyarn

#查询pnpm版本
pnpm -v

#查询yarn版本
yarn -v

行号

默认不显示可以通过以下配置为每个代码块启用行号：

export default {
  markdown: {
    lineNumbers: true
  }
}

可以在代码块中添加 :line-numbers / :no-line-numbers 标记来覆盖在配置中的设置。

还可以通过在 :line-numbers 之后添加 = 来自定义起始行号，例如 :line-numbers=2 表示代码块中的行号从 2 开始。

输入:

```ts {1}
// 默认禁用行号
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```

```ts:line-numbers {1}
// 启用行号
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```

```ts:line-numbers=2 {1}
// 行号已启用，并从 2 开始
const line3 = 'This is line 3'
const line4 = 'This is line 4'
```

输出：

// 默认禁用行号
const line2 = 'This is line 2'
const line3 = 'This is line 3'

// 启用行号
const line2 = 'This is line 2'
const line3 = 'This is line 3'

// 行号已启用，并从 2 开始
const line3 = 'This is line 3'
const line4 = 'This is line 4'

插入链接

输入：

这是一个链接 [XSJYA](https://www.xsjya.com)

输出：

这是一个链接 XSJYA

自动链接

格式：<这里填网址>

输入：

<https://www.xsjya.com>

输出：

https://www.xsjya.com

给链接增加 Title

点击查看

链接title是当鼠标悬停在链接上时会出现的文字，这个title是可选的，它放在圆括号中链接地址后面，跟链接地址之间以空格分隔。

输入：

这是一个链接 [XSJYA](https://www.XSJYA.com "我的个人主页")。

输出： 这是一个链接 XSJYA。

图片懒加载

通过在配置文件中将 lazyLoading 设置为 true，可以为通过 markdown 添加的每张图片启用懒加载。

export default {
  markdown: {
    image: {
      // 默认禁用；设置为 true 可为所有图片启用懒加载。
      lazyLoading: true
    }
  }
}

插入图片

插入图片，格式如下

输入：

![logo](/img/logo.png)

输出： logo

图片加转跳

给图片增加链接，请将图像的Markdown 括在方括号中，然后将链接添加在圆括号中。

[![XSJYA](/img/logo.png)](https://www.xsjya.com)

支持 jpg、png、gif、svg 等图片格式，svg 文件示例如下

输入：

![XSJYA](/images/i-am-svg.svg)

输出： XSJYA

提示

需要放大的图片后面加上： {data-zoomable}

![logo](./img/logo.png){data-zoomable}

图片增加缩放功能

默认的 Vitepress 加载图片后，因为布局的原因，图片显得很小，很多图片里的内容看不清晰，所以想要一个可以点击图片放大的效果

使用 medium-zoom 插件实现图片点击放大

安装medium-zoom

pnpm add -D medium-zoom

docs/.vitepress/theme/index.ts，添加如下代码

//图片放大查看
import { onMounted, watch, nextTick } from 'vue'
import { useRoute } from 'vitepress'
import mediumZoom from 'medium-zoom'
import './global.css'


export default {
  extends: DefaultTheme,
  setup() {
    const route = useRoute()
  
    const initZoom = () => {
      // 为所有图片增加缩放
      mediumZoom('.main img', { background: 'var(--vp-c-bg)' })
    }
    onMounted(() => {
      initZoom()
    })
    watch(
      () => route.path,
      () => nextTick(() => initZoom())]
    )
  },

也可设置指定图片缩放设置后在需要放大的图片后加上{data-zoomable}即可

    const initZoom = () => {  
      //指定图片增加缩放
      mediumZoom('[data-zoomable]', { background: 'var(--vp-c-bg)' })
    };

这时候，点击图片放大的功能已经实现了，但是效果不尽如人意，会被其他层级的元素遮挡图片(例如左侧的导航栏)，所以需要修改一下样式

新建docs/.vitepress/theme/global.css，添加如下样式代码，

然后在docs/.vitepress/theme/index.ts引入它

.medium-zoom-overlay {
  background-color: var(--vp-c-bg) !important;
  z-index: 100;
}

.medium-zoom-overlay ~ img {
  z-index: 101;
}

.medium-zoom--opened .medium-zoom-overlay {
  opacity: 0.9 !important;
}

🎉搞定

现在 Markdown 中的所有图片都能实现点击放大效果了，并且使用了原生自带的懒加载

表格

第一行：表头行，用 | 隔开，控制分列
第二行：控制行，用 - 隔开，控制分行

说明

使用冒号 : 可控制对齐方式

:- 表示左对齐

.或 :-: 表示中对齐

-: 表示右对齐

第三行及以下：数据行,用 | 隔开

表头行和控制行数量要一致，否则不生效！

输入：

| 姓名       | 年龄 |   能力   |
|:----------| :--: | -------: |
| 小可乐     |  4个月   |    能吃    |
| 小可乐     |  4个月   |    能喝    |
| 小可乐     |  4个月   |    能睡    |

输出：

姓名	年龄	能力
小可乐	4个月	能吃
小可乐	4个月	能喝
小可乐	4个月	能睡

更简单的方法：在线表格转换工具

嘻嘻：

小可乐是我可爱的大外甥女 😉

自定义容器

提示框美化

随着版本更新迭代，现在这 tip warning danger 颜色真的想吐槽，好丑！

在 theme/style 新建 custom-block.css 文件

.
─ docs
  ├─ .vitepress
  │  └─ config.mts
  │  └─ theme
  │     └─ style
  │        └─ index.css
  │        └─ custom-block.css
  └─ index.md

复制下面代码，粘贴到 custom-block.css 中

这个是静态的可以命名为static-custom-block.css

点击查看静态提示框代码

/*静态提示框* /

/* .vitepress/theme/style/custom-block.css */
/* 深浅色卡 */
:root {
    --custom-block-info-left: #cccccc;
    --custom-block-info-bg: #fafafa;

    --custom-block-tip-left: #009400;
    --custom-block-tip-bg: #e6f6e6;

    --custom-block-warning-left: #e6a700;
    --custom-block-warning-bg: #fff8e6;

    --custom-block-danger-left: #e13238;
    --custom-block-danger-bg: #ffebec;

    --custom-block-note-left: #4cb3d4;
    --custom-block-note-bg: #eef9fd;

    --custom-block-important-left: #a371f7;
    --custom-block-important-bg: #f4eefe;

    --custom-block-caution-left: #e0575b;
    --custom-block-caution-bg: #fde4e8;
}

.dark {
    --custom-block-info-left: #cccccc;
    --custom-block-info-bg: #474748;

    --custom-block-tip-left: #009400;
    --custom-block-tip-bg: #003100;

    --custom-block-warning-left: #e6a700;
    --custom-block-warning-bg: #4d3800;

    --custom-block-danger-left: #e13238;
    --custom-block-danger-bg: #4b1113;

    --custom-block-note-left: #4cb3d4;
    --custom-block-note-bg: #193c47;

    --custom-block-important-left: #a371f7;
    --custom-block-important-bg: #230555;

    --custom-block-caution-left: #e0575b;
    --custom-block-caution-bg: #391c22;
}


/* 标题字体大小 */
.custom-block-title {
    font-size: 16px;
}

/* info容器:背景色、左侧 */
.custom-block.info {
    border-left: 5px solid var(--custom-block-info-left);
    background-color: var(--custom-block-info-bg);
}

/* info容器:svg图 */
.custom-block.info [class*="custom-block-title"]::before {
    content: '';
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z' fill='%23ccc'/%3E%3C/svg%3E");
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin-right: 4px;
    left: -5px;
    top: -1px;
}

/* 提示容器:边框色、背景色、左侧 */
.custom-block.tip {
    /* border-color: var(--custom-block-tip); */ 
    border-left: 5px solid var(--custom-block-tip-left);
    background-color: var(--custom-block-tip-bg);
}

/* 提示容器:svg图 */
.custom-block.tip [class*="custom-block-title"]::before {
    content: '';
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23009400' d='M7.941 18c-.297-1.273-1.637-2.314-2.187-3a8 8 0 1 1 12.49.002c-.55.685-1.888 1.726-2.185 2.998H7.94zM16 20v1a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-1h8zm-3-9.995V6l-4.5 6.005H11v4l4.5-6H13z'/%3E%3C/svg%3E");
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin-right: 4px;
    left: -5px;
    top: -2px;
}

/* 警告容器:背景色、左侧 */
.custom-block.warning {
    border-left: 5px solid var(--custom-block-warning-left);
    background-color: var(--custom-block-warning-bg);
}

/* 警告容器:svg图 */
.custom-block.warning [class*="custom-block-title"]::before {
    content: '';
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M576.286 752.57v-95.425q0-7.031-4.771-11.802t-11.3-4.772h-96.43q-6.528 0-11.3 4.772t-4.77 11.802v95.424q0 7.031 4.77 11.803t11.3 4.77h96.43q6.528 0 11.3-4.77t4.77-11.803zm-1.005-187.836 9.04-230.524q0-6.027-5.022-9.543-6.529-5.524-12.053-5.524H456.754q-5.524 0-12.053 5.524-5.022 3.516-5.022 10.547l8.538 229.52q0 5.023 5.022 8.287t12.053 3.265h92.913q7.032 0 11.803-3.265t5.273-8.287zM568.25 95.65l385.714 707.142q17.578 31.641-1.004 63.282-8.538 14.564-23.354 23.102t-31.892 8.538H126.286q-17.076 0-31.892-8.538T71.04 866.074q-18.582-31.641-1.004-63.282L455.75 95.65q8.538-15.57 23.605-24.61T512 62t32.645 9.04 23.605 24.61z' fill='%23e6a700'/%3E%3C/svg%3E");
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin-right: 4px;
    left: -5px;
}

/* 危险容器:背景色、左侧 */
.custom-block.danger {
    border-left: 5px solid var(--custom-block-danger-left);
    background-color: var(--custom-block-danger-bg);
}

/* 危险容器:svg图 */
.custom-block.danger [class*="custom-block-title"]::before {
    content: '';
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.523 0 10 4.477 10 10v3.764a2 2 0 0 1-1.106 1.789L18 19v1a3 3 0 0 1-2.824 2.995L14.95 23a2.5 2.5 0 0 0 .044-.33L15 22.5V22a2 2 0 0 0-1.85-1.995L13 20h-2a2 2 0 0 0-1.995 1.85L9 22v.5c0 .171.017.339.05.5H9a3 3 0 0 1-3-3v-1l-2.894-1.447A2 2 0 0 1 2 15.763V12C2 6.477 6.477 2 12 2zm-4 9a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z' fill='%23e13238'/%3E%3C/svg%3E");
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin-right: 4px;
    left: -5px;
    top: -1px;
}

/* NOTE容器:背景色、左侧 */
.custom-block.note {
    border-left: 5px solid var(--custom-block-note-left);
    background-color: var(--custom-block-note-bg);
}

/* NOTE容器:svg图 */
.custom-block.note [class*="custom-block-title"]::before {
    content: '';
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z' fill='%234cb3d4'/%3E%3C/svg%3E");
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin-right: 4px;
    left: -5px;
    top: -1px;
}

/* IMPORTANT容器:背景色、左侧 */
.custom-block.important {
    border-left: 5px solid var(--custom-block-important-left);
    background-color: var(--custom-block-important-bg);
}

/* IMPORTANT容器:svg图 */
.custom-block.important [class*="custom-block-title"]::before {
    content: '';
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 981.333a84.992 84.992 0 0 1-84.907-84.906h169.814A84.992 84.992 0 0 1 512 981.333zm384-128H128v-42.666l85.333-85.334v-256A298.325 298.325 0 0 1 448 177.92V128a64 64 0 0 1 128 0v49.92a298.325 298.325 0 0 1 234.667 291.413v256L896 810.667v42.666zm-426.667-256v85.334h85.334v-85.334h-85.334zm0-256V512h85.334V341.333h-85.334z' fill='%23a371f7'/%3E%3C/svg%3E");
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin-right: 4px;
    left: -5px;
    top: -1px;
}

/* CAUTION容器:背景色、左侧 */
.custom-block.caution {
    border-left: 5px solid var(--custom-block-caution-left);
    background-color: var(--custom-block-caution-bg);
}

/* CAUTION容器:svg图 */
.custom-block.caution [class*="custom-block-title"]::before {
    content: '';
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.523 0 10 4.477 10 10v3.764a2 2 0 0 1-1.106 1.789L18 19v1a3 3 0 0 1-2.824 2.995L14.95 23a2.5 2.5 0 0 0 .044-.33L15 22.5V22a2 2 0 0 0-1.85-1.995L13 20h-2a2 2 0 0 0-1.995 1.85L9 22v.5c0 .171.017.339.05.5H9a3 3 0 0 1-3-3v-1l-2.894-1.447A2 2 0 0 1 2 15.763V12C2 6.477 6.477 2 12 2zm-4 9a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z' fill='%23e13238'/%3E%3C/svg%3E");
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin-right: 4px;
    left: -5px;
    top: -1px;
}

看看效果：静态提示框效果演示

如果想更花里胡哨的，可以加一个流体边框，类似跑马灯的效果

点击查看动态提示框代码

custom-block.css (复制，粘贴，覆盖原先的代码保存)

这个是动态的提示框可以命名为：dynamic-custom-block.css

/*动态提示框*/
/* .vitepress/theme/style/custom-block.css */
/* 深浅色卡 */
:root {
  --custom-block-info-left: #cccccc;
  --custom-block-info-bg: #fafafa;

  --custom-block-tip-left: #009400;
  --custom-block-tip-bg: #e6f6e6;

  --custom-block-warning-left: #e6a700;
  --custom-block-warning-bg: #fff8e6;

  --custom-block-danger-left: #e13238;
  --custom-block-danger-bg: #ffebec;

  --custom-block-note-left: #4cb3d4;
  --custom-block-note-bg: #eef9fd;

  --custom-block-important-left: #a371f7;
  --custom-block-important-bg: #f4eefe;

  --custom-block-caution-left: #e0575b;
  --custom-block-caution-bg: #fde4e8;
}

.dark {
  --custom-block-info-left: #cccccc;
  --custom-block-info-bg: #474748;

  --custom-block-tip-left: #009400;
  --custom-block-tip-bg: #003100;

  --custom-block-warning-left: #e6a700;
  --custom-block-warning-bg: #4d3800;

  --custom-block-danger-left: #e13238;
  --custom-block-danger-bg: #4b1113;

  --custom-block-note-left: #4cb3d4;
  --custom-block-note-bg: #193c47;

  --custom-block-important-left: #a371f7;
  --custom-block-important-bg: #230555;

  --custom-block-caution-left: #e0575b;
  --custom-block-caution-bg: #391c22;
}


/* 标题字体大小 */
.custom-block-title {
  font-size: 16px;
}

/* info容器:背景色、流体边框 */
.custom-block.info {
  border-left: none;
  background-color: var(--custom-block-info-bg);
  position: relative;
  transition: all .3s;
}

/* info容器:svg图 */
.custom-block.info [class*="custom-block-title"]::before {
  content: '';
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z' fill='%23ccc'/%3E%3C/svg%3E");
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin-right: 4px;
  left: -5px;
  top: -1px;
}

/* info容器:流体边框 */
.custom-block.info::before,
.custom-block.info::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid var(--custom-block-info-left);
  transition: all .5s;
  animation: clippath 6s infinite linear;
  border-radius: 10px;
}

/* info容器:流体边框动画 */
.custom-block.info::after {
  animation: clippath 6s infinite -3s linear;
}




/* TIP容器::背景色、流体边框 */
.custom-block.tip {
  border-left: none;
  background-color: var(--custom-block-tip-bg);
  position: relative;
  transition: all .3s;
}

/* TIP容器:svg图 */
.custom-block.tip [class*="custom-block-title"]::before {
  content: '';
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23009400' d='M7.941 18c-.297-1.273-1.637-2.314-2.187-3a8 8 0 1 1 12.49.002c-.55.685-1.888 1.726-2.185 2.998H7.94zM16 20v1a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-1h8zm-3-9.995V6l-4.5 6.005H11v4l4.5-6H13z'/%3E%3C/svg%3E");
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin-right: 4px;
  left: -5px;
  top: -2px;
}

/* TIP容器:流体边框 */
.custom-block.tip::before,
.custom-block.tip::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid var(--custom-block-tip-left);
  transition: all .5s;
  animation: clippath 6s infinite linear;
  border-radius: 10px;
}

/* TIP容器:流体边框动画 */
.custom-block.tip::after {
  animation: clippath 6s infinite -3s linear;
}




/* WARNING:背景色、流体边框 */
.custom-block.warning {
  border-left: none;
  background-color: var(--custom-block-warning-bg);
  position: relative;
  transition: all .3s;
}

/* WARNING:svg图 */
.custom-block.warning [class*="custom-block-title"]::before {
  content: '';
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M576.286 752.57v-95.425q0-7.031-4.771-11.802t-11.3-4.772h-96.43q-6.528 0-11.3 4.772t-4.77 11.802v95.424q0 7.031 4.77 11.803t11.3 4.77h96.43q6.528 0 11.3-4.77t4.77-11.803zm-1.005-187.836 9.04-230.524q0-6.027-5.022-9.543-6.529-5.524-12.053-5.524H456.754q-5.524 0-12.053 5.524-5.022 3.516-5.022 10.547l8.538 229.52q0 5.023 5.022 8.287t12.053 3.265h92.913q7.032 0 11.803-3.265t5.273-8.287zM568.25 95.65l385.714 707.142q17.578 31.641-1.004 63.282-8.538 14.564-23.354 23.102t-31.892 8.538H126.286q-17.076 0-31.892-8.538T71.04 866.074q-18.582-31.641-1.004-63.282L455.75 95.65q8.538-15.57 23.605-24.61T512 62t32.645 9.04 23.605 24.61z' fill='%23e6a700'/%3E%3C/svg%3E");
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin-right: 4px;
  left: -5px;
}

/* WARNING容器:流体边框 */
.custom-block.warning::before,
.custom-block.warning::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid var(--custom-block-warning-left);
  transition: all .5s;
  animation: clippath 6s infinite linear;
  border-radius: 10px;
}

/* WARNING容器:流体边框动画 */
.custom-block.warning::after {
  animation: clippath 6s infinite -3s linear;
}




/* DANGER容器:背景色、流体边框 */
.custom-block.danger {
  border-left: none;
  background-color: var(--custom-block-danger-bg);
  position: relative;
  transition: all .3s;
}

/* DANGER容器:svg图 */
.custom-block.danger [class*="custom-block-title"]::before {
  content: '';
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.523 0 10 4.477 10 10v3.764a2 2 0 0 1-1.106 1.789L18 19v1a3 3 0 0 1-2.824 2.995L14.95 23a2.5 2.5 0 0 0 .044-.33L15 22.5V22a2 2 0 0 0-1.85-1.995L13 20h-2a2 2 0 0 0-1.995 1.85L9 22v.5c0 .171.017.339.05.5H9a3 3 0 0 1-3-3v-1l-2.894-1.447A2 2 0 0 1 2 15.763V12C2 6.477 6.477 2 12 2zm-4 9a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z' fill='%23e13238'/%3E%3C/svg%3E");
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin-right: 4px;
  left: -5px;
  top: -1px;
}


/* DANGER容器:流体边框 */
.custom-block.danger::before,
.custom-block.danger::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid var(--custom-block-danger-left);
  transition: all .5s;
  animation: clippath 6s infinite linear;
  border-radius: 10px;
}

/* DANGER容器:流体边框动画 */
.custom-block.danger::after {
  animation: clippath 6s infinite -3s linear;
}








/* GitHub风格警告 */



/* NOTE容器:背景色、流体边框 */
.custom-block.note {
  border-left: none;
  background-color: var(--custom-block-note-bg);
  position: relative;
  transition: all .3s;
}

/* NOTE容器:svg图 */
.custom-block.note [class*="custom-block-title"]::before {
  content: '';
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z' fill='%234cb3d4'/%3E%3C/svg%3E");
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin-right: 4px;
  left: -5px;
  top: -1px;
}

/* NOTE容器:流体边框 */
.custom-block.note.github-alert::before,
.custom-block.note.github-alert::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid var(--custom-block-note-left);
  transition: all .5s;
  animation: clippath 6s infinite linear;
  border-radius: 10px;
}

/* NOTE容器:流体边框动画 */
.custom-block.note.github-alert::after {
  animation: clippath 6s infinite -3s linear;
}




/* IMPORTANT容器:背景色、流体边框 */
.custom-block.important {
  border-left: none;
  background-color: var(--custom-block-important-bg);
  position: relative;
  transition: all .3s;
}

/* IMPORTANT容器:svg图 */
.custom-block.important [class*="custom-block-title"]::before {
  content: '';
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 981.333a84.992 84.992 0 0 1-84.907-84.906h169.814A84.992 84.992 0 0 1 512 981.333zm384-128H128v-42.666l85.333-85.334v-256A298.325 298.325 0 0 1 448 177.92V128a64 64 0 0 1 128 0v49.92a298.325 298.325 0 0 1 234.667 291.413v256L896 810.667v42.666zm-426.667-256v85.334h85.334v-85.334h-85.334zm0-256V512h85.334V341.333h-85.334z' fill='%23a371f7'/%3E%3C/svg%3E");
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin-right: 4px;
  left: -5px;
  top: -1px;
}


/* IMPORTANT容器:流体边框 */
.custom-block.important.github-alert::before,
.custom-block.important.github-alert::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid var(--custom-block-important-left);
  transition: all .5s;
  animation: clippath 6s infinite linear;
  border-radius: 10px;
}

/* IMPORTANT容器:流体边框动画 */
.custom-block.important.github-alert::after {
  animation: clippath 6s infinite -3s linear;
}




/* CAUTION容器:背景色、流体边框 */
.custom-block.caution {
  border-left: none;
  background-color: var(--custom-block-caution-bg);
  position: relative;
  transition: all .3s;
}

/* CAUTION容器:svg图 */
.custom-block.caution [class*="custom-block-title"]::before {
  content: '';
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.523 0 10 4.477 10 10v3.764a2 2 0 0 1-1.106 1.789L18 19v1a3 3 0 0 1-2.824 2.995L14.95 23a2.5 2.5 0 0 0 .044-.33L15 22.5V22a2 2 0 0 0-1.85-1.995L13 20h-2a2 2 0 0 0-1.995 1.85L9 22v.5c0 .171.017.339.05.5H9a3 3 0 0 1-3-3v-1l-2.894-1.447A2 2 0 0 1 2 15.763V12C2 6.477 6.477 2 12 2zm-4 9a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z' fill='%23e13238'/%3E%3C/svg%3E");
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin-right: 4px;
  left: -5px;
  top: -1px;
}

/* CAUTION容器:流体边框 */
.custom-block.caution.github-alert::before,
.custom-block.caution.github-alert::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid var(--custom-block-caution-left);
  transition: all .5s;
  animation: clippath 6s infinite linear;
  border-radius: 10px;
}

/* CAUTION容器:流体边框动画 */
.custom-block.caution.github-alert::after {
  animation: clippath 6s infinite -3s linear;
}



/* 流光边框 - 跑马灯 */

@keyframes clippath {

  0%,
  100% {
    clip-path: inset(0 0 90% 0);
  }

  25% {
    clip-path: inset(0 90% 0 0);
  }

  50% {
    clip-path: inset(90% 0 0 0);
  }

  75% {
    clip-path: inset(0 0 0 90%);
  }
}

动态提示框效果演示

静态-动态两个文件可以同时存在（文件名要不一样）用的时候注释掉另一个也许可以同时用但是我不会嘻嘻

.vitepress\theme\index.ts 内写入

//静态提示框
//import './style/Static-custom-block.css'
//动态提示框
import './style/dynamic-custom-block.css'

用静态的就注释动态的

用动态的就注释静态的

输入：

::: 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.
:::

输出：

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.

html

支持原生 html ，请写内联样式，如下

<span style="display:block;text-align:right;color:orangered;">橙色居右</span>

<span style="display:block;text-align:center;color:orangered;">橙色居中</span>

橙色居右

橙色居中

卡片式的超链接

部署：

展开查看部署

在 .vitepress\theme\style\ 目录新建一个 linkcard.css 文件

.
─ docs
  ├─ .vitepress
  │  └─ config.mts
  │  └─ theme
  │    └─ style
  │        └─ linkcard.css
  └─ index.md

粘贴如下代码，保存

/* .vitepress\theme\style\linkcard.css */

/* 卡片背景 */
.linkcard {
  background-color: var(--vp-c-bg-soft);
  border-radius: 8px;
  padding: 8px 16px 8px 8px;
  transition: color 0.5s, background-color 0.5s;
}

/* 卡片鼠标悬停 */
.linkcard:hover {
  background-color: var(--vp-c-gray-soft);
}

/* 链接样式 */
.linkcard a {
  display: flex;
  align-items: center;
}

/* 描述链接文字 */
.linkcard .description {
  flex: 1;
  font-weight: 500;
  font-size: 16px;
  line-height: 25px;
  color: var(--vp-c-text-1);
  margin: 0 0 0 16px;
  transition: color 0.5s;
}

/* 描述链接文字2 */
.linkcard .description span {
  font-size: 14px;
}

/* logo图片 */
.linkcard .logo img {
  width: 80px;
  object-fit: contain;
}

/* 链接下划线去除 */
.vp-doc a {
  text-decoration: none;
}

最后在 .vitepress\theme\index.ts 写入

//链接卡片
import './style/linkcard.css'

输入：

<style src="/.vitepress/theme/style/linkcard.css"></style>
<div class="linkcard">
  <a href="https://www.xsjya.com/" target="_blank">
    <p class="description">XSJYA<br><span>我的个人主页</span></p>
    <div class="logo">
        <img alt="Logo" width="70px" height="70px" src="/img/Favicon.ico" />
    </div>
  </a>
</div>

输出：

XSJYA
我的个人主页

输入：

<style src="/.vitepress/theme/style/linkcard.css"></style>
<div class="linkcard">
  <a href="https://www.xsjya.com/" target="_blank">
    <p class="description">XSJYA<br><span>我的个人主页</span></p>
    <div class="logo">
        <img alt="Logo" width="70px" height="70px" src="/img/Favicon.ico" />
    </div>
  </a>
</div>

输出：

XSJYA
我的个人主页

Markdown 教程 ​

标题 ​

锚点 ​

自定义锚点 ​

分隔线 ​

Badge组件 ​

Emoji 🎉 ​

无序列表 ​

有序列表 ​

引用 ​

多个段落的块引用 ​

嵌套块引用 ​

围栏代码块 ​

代码块中的语法高亮 ​

在代码块中实现行高亮 ​

代码块中的颜色差异 ​

高亮“错误”和“警告” ​

代码块中聚焦 ​

代码组 ​

行号 ​

插入链接 ​

自动链接 ​

给链接增加 Title ​

图片懒加载 ​

插入图片 ​

图片加转跳 ​

表格 ​

自定义容器 ​

html ​

卡片式的超链接 ​

Markdown 教程

标题

锚点

自定义锚点

分隔线

Badge组件

Emoji 🎉

无序列表

有序列表

引用

多个段落的块引用

嵌套块引用

围栏代码块

代码块中的语法高亮

在代码块中实现行高亮

代码块中的颜色差异

高亮“错误”和“警告”

代码块中聚焦

代码组

行号

插入链接

自动链接

给链接增加 Title

图片懒加载

插入图片

图片加转跳

表格

自定义容器

html

卡片式的超链接