writing-guide

约 5072 字大约 17 分钟

VuePressMarkdown写作指南Plume主题

次阅读

2026-03-19

⚠ 请注意，本文编写于 179 天前，最后最后修改于 93 天前，其中某些信息可能已经过时。

本文档详细整理自 vuepress-theme-plume 官方文档，涵盖所有 Markdown 扩展语法和写作功能。

启用方式

以下功能默认不启用，需在 .vuepress/plume.config.ts 中开启：

markdown: {
  mermaid: true,       // Mermaid 图表
  bilibili: true,      // Bilibili 视频
  collapse: true,       // 折叠面板
  timeline: true,       // 时间线
  chat: true,          // 对话记录
  plot: true,          // 隐秘文本
  qrcode: true,        // 二维码
  codeTree: true,       // 代码树
  abbr: true,          // 缩写词
  annotation: true,     // 内容注释
  field: true,         // 字段容器
  npmTo: true,         // npm 命令转换
}

一、文本增强

1.1 提示容器（默认启用）

使用 ::: type 包裹内容：

::: note   内容 :::
::: info   内容 :::
::: tip    内容 :::
::: warning 内容 :::
::: caution 内容 :::
::: details 点我展开 :::

可自定义标题：

::: caution 危险操作
请勿随意尝试！
:::

::: details 点我看代码
```js
console.log('Hello!')

:::


**输出效果：**

::: note
这是一个注释框
:::

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

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

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

::: caution
这是一个危险警告框
:::

::: details 点我展开
这是一个详情折叠框
:::

---

### 1.2 GitHub 风格警报

```md
> [!NOTE]
> 强调用户在快速浏览文档时也不应忽略的重要信息。

> [!TIP]
> 有助于用户更顺利达成目标的建议性信息。

> [!IMPORTANT]
> 对用户达成目标至关重要的信息。

> [!WARNING]
> 因为可能存在风险，所以需要用户立即关注的关键内容。

> [!CAUTION]
> 行为可能带来的负面影响。

输出效果：

笔记

强调用户在快速浏览文档时也不应忽略的重要信息。

提示

有助于用户更顺利达成目标的建议性信息。

重要

对用户达成目标至关重要的信息。

警告

因为可能存在风险，所以需要用户立即关注的关键内容。

注意

行为可能带来的负面影响。

1.3 马克笔高亮（默认启用）

使用 == == 进行标记：

vuepress-theme-plume 是一个 ==简洁美观== 的主题

输出： vuepress-theme-plume 是一个简洁美观的主题

添加配色：

==一个提示=={.tip}
==一个警告=={.warning}
==一个错误=={.danger}
==重要内容=={.important}

可用类型：

类型	语法	颜色
default	`==文本==`	默认颜色
info	`==文本=={.info}`	蓝色
note	`==文本=={.note}`	黄色
tip	`==文本=={.tip}`	绿色
warning	`==文本=={.warning}`	橙色
danger/caution	`==文本=={.danger}`	红色
important	`==文本=={.important}`	紫色

懒加载动画模式：

markdown: {
  mark: 'lazy',  // 滚动到可视区域后再播放动画
}

1.4 自定义对齐（默认启用）

::: left
左对齐的内容
:::

::: center
居中的内容
:::

::: right
右对齐的内容
:::

输出：

左对齐的内容

居中的内容

右对齐的内容

1.5 上下角标（默认启用）

19^th^
H~2~O

输出： 19^th H₂O

1.6 脚注（默认启用）

人生自古谁无死，留取丹心照汗青[^脚注1]。

[^脚注1]: 出自 宋·文天祥《过零丁洋》

输出： 人生自古谁无死，留取丹心照汗青^[1]。

1.7 自定义锚点

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

链接：[跳转](#my-anchor)

1.8 目录表

[[TOC]]

二、布局容器

2.1 文件树（默认启用）

::: file-tree
- docs
  - .vuepress
    - ++ config.ts    # ++ 新增（绿色）
    - -- page1.md     # -- 删除（红色）
  - README.md
  - **Navbar.vue**   # 加粗突出
  - node/            # 目录末尾加 / 不展开子项
  - …                # … 占位符
:::

::: file-tree icon="simple" title="项目结构"
- src
  - index.ts
  - App.vue
:::

输出：

docs

.vuepress

config.ts

page1.md

README.md

Navbar.vue

node

…

2.2 步骤

:::: steps
1. 步骤 1

   ```ts
   console.log('Hello!')
   ```

2. 步骤 2

   相关内容

3. 步骤 3

   ::: tip
   提示容器
   :::

::::

输出：

步骤 1
```
console.log('Hello!')
```
步骤 2
相关内容
步骤 3
提示
提示容器

2.3 选项卡

::: tabs
@tab npm

npm 应该与 Node.js 被一同安装。

@tab:active pnpm

```sh
corepack enable
corepack use pnpm@8
```

@tab yarn

yarn 内容

:::

::: tabs#fruit

@tab:active 苹果
苹果内容

@tab 香蕉
香蕉内容

@tab 橙子
橙子内容

:::

输出：

npm

npm 应该与 Node.js 被一同安装。

pnpm

corepack enable
corepack use pnpm@8

yarn

yarn 内容

苹果

苹果内容

香蕉

香蕉内容

橙子

橙子内容

2.4 折叠面板（需启用）

::: collapse
* 标题 1

  内容（标题与内容必须空一行）

* :+ 标题 2      # :+ 默认展开

  内容

* 标题 3

  内容
:::

::: collapse accordion   # 手风琴模式
* 标题 1

  内容

* 标题 2

  内容

* 标题 3

  内容
:::

::: collapse expand      # 默认全部展开
* 标题 1

  内容

* :- 标题 2             # :- 标记折叠

  内容

* 标题 3

  内容
:::

输出：

标题 1

标题 2 # :+ 默认展开

内容

标题 3

标题 1

标题 2

标题 3

标题 1

内容

标题 2

标题 3

内容

2.5 时间线（需启用）

::: timeline
* 节点一 time=2025-03-20 type=success

  正文内容

* 节点二 time=2025-01-22 type=warning

  正文内容

* 节点三 time=2025-01-22 type=danger icon=mdi:bookmark

  正文内容
:::

输出：

节点一 time=2025-03-20 type=success

正文内容

节点二 time=2025-01-22 type=warning

正文内容

节点三 time=2025-01-22 type=danger icon=mdi:bookmark

正文内容

水平方向：

::: timeline horizontal
* 节点一 time=2025-03-20

  正文内容

* 节点二 time=2025-04-20 type=success

  正文内容

* 节点三 time=2025-01-22 type=danger

  正文内容
:::

输出：

节点一 time=2025-03-20

正文内容

节点二 time=2025-04-20 type=success

正文内容

节点三 time=2025-01-22 type=danger

正文内容

两端对齐：

::: timeline placement="between"
* 节点一 time=2025-03-20 placement=right

  正文内容

* 节点二 time=2025-04-20 type=success

  正文内容

* 节点三 time=2025-01-22 type=danger placement=right

  正文内容
:::

输出：

节点一 time=2025-03-20 placement=right

正文内容

节点二 time=2025-04-20 type=success

正文内容

节点三 time=2025-01-22 type=danger placement=right

正文内容

节点类型：

类型	说明
`info`	信息（默认）
`tip`	提示
`success`	成功
`warning`	警告
`danger`	危险
`caution`	注意
`important`	重要

2.6 卡片 + 卡片网格

::: card title="卡片标题" icon="twemoji:astonished-face"
卡片内容
:::

:::: card-grid
::: card title="卡片1"
内容
:::
::: card title="卡片2"
内容
:::
::::

输出：

卡片标题

卡片内容

卡片1

内容

卡片2

内容

2.7 Flex 弹性布局

::: flex center

| 列 1 | 列 2 | 列 3 |
| ----- | ----- | ----- |
| 1     | 2     | 3     |
| 4     | 5     | 6     |

:::

::: flex between center

| 列 1 | 列 2 | 列 3 |
| ----- | ----- | ----- |
| 1     | 2     | 3     |

| 列 1 | 列 2 | 列 3 |
| ----- | ----- | ----- |
| 1     | 2     | 3     |

:::

::: flex around center

| 列 1 | 列 2 |
| ----- | ----- |
| 1     | 2     |

| 列 1 | 列 2 |
| ----- | ----- |
| 1     | 2     |

:::

::: flex gap="20" column

内容块1

内容块2

:::

输出：

列 1	列 2	列 3
1	2	3
4	5	6

列 1	列 2	列 3
1	2	3

列 1	列 2	列 3
1	2	3

列 1	列 2
1	2

列 1	列 2
1	2

2.8 示例窗口（默认启用）

::: window title="标题"
### 三级标题

这是示例容器中的内容。
:::

::: window
![hero](/images/cover.webp)
:::

输出：

标题

三级标题

这是示例容器中的内容。

2.9 瀑布流（默认启用）

::: card-masonry

![a](https://images.unsplash.com/photo-1?w=400)

![b](https://images.unsplash.com/photo-2?w=400)

![c](https://images.unsplash.com/photo-3?w=400)

![d](https://images.unsplash.com/photo-4?w=400)

![e](https://images.unsplash.com/photo-5?w=400)

![f](https://images.unsplash.com/photo-6?w=400)

:::

:::: card-masonry cols="{ sm: 1, md: 2, lg: 3 }"

::: card title="卡片1"
内容
:::

::: card title="卡片2"
内容（更多内容）
:::

::: card title="卡片3"
内容
:::

::::

三、图表与媒体

3.1 Mermaid 图表（需启用 + 安装 mermaid）

安装：npm install mermaid，启用 markdown.mermaid: true

流程图

```mermaid
graph TB
  A --> B
  subgraph one
  A1 --> A2
  end
  subgraph two
  B1 --> B2
  end
  one --> two
  two --> C
```

输出：

时序图

```sequence
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Alice->John: Yes... John, how are you?
```

输出：

类图

```class Animal Example
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
  +String beakColor
  +swim()
  +quack()
}
class Fish{
  -int sizeInFeet
  -canEat()
}
```

输出：

甘特图

```gantt
dateFormat  YYYY-MM-DD
title 项目计划
section 设计
完成设计 :done, des1, 2024-01-06, 2024-01-08
进行中任务 :active, des2, 2024-01-09, 3d
未来任务 :         des3, after des2, 5d
```

输出：

饼图

```pie
"选项A" : 40
"选项B" : 35
"选项C" : 25
```

输出：

思维导图

```mindmap
root((VuePress))
  Out of box
    Default theme
      Navbar
      Sidebar
      Darkmode
    Search
  Customize
    Theme
      Plume
    Plugins
```

输出：

Git 图

```git-graph
commit id:"ash" tag:"abc"
branch hotfix
checkout hotfix
commit
checkout main
merge hotfix
```

输出：

状态图

```state State Example
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
```

输出：

ER 图

```er Er Example
CAR ||--o{ NAMED-DRIVER : allows
CAR {
    string registrationNumber
    string make
    string model
}
PERSON ||--o{ NAMED-DRIVER : is
PERSON {
    string firstName
    string lastName
}
```

输出：

象限图

```quadrant
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
```

输出：

XY 坐标图

```xy
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500]
line [5000, 6000, 7500, 8200, 9500]
```

输出：

块图

```block
columns 3
前端 right 后端
space:2 down down
硬盘 left left 数据库
```

输出：

支持的图表类型：

语言	类型	说明
`mermaid`	流程图/时序图/甘特图等	通用 Mermaid
`sequence`	时序图	简写语法
`class`	类图	简写语法
`gantt`	甘特图	简写语法
`pie`	饼图	简写语法
`mindmap`	思维导图	简写语法
`timeline`	时间线图	简写语法
`git-graph`	Git 图	简写语法
`state`	状态图	简写语法
`er`	ER 图	简写语法
`journey`	用户旅程	简写语法
`c4c`	C4 架构图	简写语法
`sankey`	桑基图	简写语法
`requirement`	需求图	简写语法
`quadrant`	象限图	简写语法
`xy`	XY 坐标图	简写语法
`block`	块图	简写语法

3.2 Bilibili 视频（需启用）

@[bilibili](BV1EZ42187Hg)

@[bilibili width="320px" ratio="9:16"](BV1zr42187eg)

@[bilibili p1](aid cid)

@[bilibili autoplay time="60"](bvid)

参数说明：

参数	说明	示例
`width`	视频宽度	`width="320px"`
`ratio`	视频比例	`ratio="9:16"`
`p1`	分P视频	`@[bilibili p1](aid cid)`
`autoplay`	自动播放	`@[bilibili autoplay](bvid)`
`time`	开始时间	`time="60"`（秒）

3.3 二维码（需启用）

@[qrcode](https://github.com/pengzhanbo/vuepress-theme-plume)

@[qrcode card title="vuepress-theme-plume"](https://github.com/pengzhanbo/vuepress-theme-plume)

@[qrcode svg width=200](vuepress-theme-plume)

::: qrcode title="宣州谢朓楼饯别校书叔云" card
弃我去者，昨日之日不可留。
乱我心者，今日之日多烦忧。
长风万里送秋雁，对此可以酣高楼。
蓬莱文章建安骨，中间小谢又清发。
俱怀逸兴壮思飞，欲上青天览明月。
抽刀断水水更流，举杯消愁愁更愁。
人生在世不称意，明朝散发弄扁舟。
:::

输出：

@qrcode

@qrcode card title="vuepress-theme-plume"

@qrcode svg width=200（在新窗口打开）

参数说明：

参数	说明	默认值
`card`	卡片样式	`false`
`svg`	SVG 格式	`false`
`title`	二维码标题	-
`align`	对齐方式	`left`
`width`	二维码宽度	`300`
`light`	背景色	`#ffffffff`
`dark`	前景色	`#000000ff`
`margin`	边距	`2`
`level`	纠错等级	`M`
`version`	二维码版本	自动

3.4 轮播图（需安装 swiper）

在 .vuepress/client.ts 中注册：

import Swiper from 'vuepress-theme-plume/features/Swiper.vue'

export default defineClientConfig({
  enhance: ({ app }) => {
    app.component('Swiper', Swiper)
  },
})

<Swiper :items="['/img1.webp', '/img2.webp', '/img3.webp']" />

<Swiper :items="images" effect="cube" :height="400" />

<Swiper :items="images" mode="carousel" :slides-per-view="3" />

<Swiper :items="images" mode="broadcast" :height="200" mousewheel />

效果参数：

参数	说明	可选值
`effect`	轮播效果	`slide` / `fade` / `cube` / `coverflow` / `flip` / `cards`
`mode`	轮播模式	`banner` / `carousel` / `broadcast`
`delay`	间隔时间(ms)	默认 `3000`
`speed`	动画速度(ms)	默认 `300`
`loop`	是否循环	`true` / `false`
`pauseOnMouseEnter`	悬停暂停	`true` / `false`

3.5 图片预览（默认启用）

点击文章中的图片可放大预览。

忽略某些图片：

![alt](path/to/image){.no-view}
![alt](path/to/image){.ignore}
![alt](path/to/image){no-view}

四、交互功能

4.1 隐秘文本（需启用）

!!鼠标悬停看到我了!!
!!点击看到我了!!{.click}
!!模糊效果!!{.blur}
!!遮罩层效果!!{.mask}
!!遮罩+点击!!{.mask .click}
!!模糊+悬停!!{.blur .hover}

参数：

参数	说明
`.hover`	鼠标悬停触发（默认）
`.click`	点击触发
`.mask`	遮罩层效果（默认）
`.blur`	模糊效果

4.2 对话记录（需启用）

::: chat title="对话标题"
&#123;:2025-03-24 10:15:00}

{用户A}
用户A的消息

{.}
本人的消息

{用户B}
用户B的消息

{.}
第二条本人消息
:::

输出：

对话标题

用户A

用户A的消息

本人的消息

用户B

用户B的消息

第二条本人消息

语法说明：

标记	说明
`{:时间}`	时间戳
`{用户名}`	其他用户消息
`{.}`	本人消息

4.3 代码树（需启用）

::: code-tree title="Vue App" height="400px" entry="src/main.ts"
```vue title="src/components/HelloWorld.vue"
<template>
  <div class="hello">
    <h1>Hello World</h1>
  </div>
</template>
```

```vue title="src/App.vue"
<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>
```

```ts title="src/main.ts"
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
```
:::

@[code-tree title="Collections 配置"](/.vuepress/collections)

参数：

参数	说明
`title`	代码树标题
`height`	代码树高度
`entry`	默认展开的文件路径

4.4 内容注释（需启用）

站点由 VuePress [+vuepress] 驱动。

[+vuepress]:
  VuePress 是一个 [静态站点生成器](https://v2.vuepress.vuejs.org/) (SSG) 。
  专为构建以内容为中心的站点而设计。

同标签多个定义：

中国古代 **四大名著** [+名著] 家喻户晓。

[+名著]:
  **《三国演义》：**
  以三国时期的历史为背景...

[+名著]:
  **《西游记》：**
  讲述了唐僧师徒四人...

[+名著]:
  **《红楼梦》：**
  以贾、史、王、薛四大家族的兴衰...

[+名著]:
  **《水浒传》：**
  描写了北宋末年以宋江为首的108位好汉...

输出：

中国古代 四大名著 家喻户晓。

五、代码增强

5.1 代码块标题、行号、高亮（默认启用）

```json title="package.json"
{
  "name": "vuepress-theme-plume",
  "version": "1.0.0"
}
```

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

```js{1,4,6-8}
export default { // Highlighted
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
```

```ts:line-numbers=2
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```

```ts:no-line-numbers
const line3 = 'This is line 3'
const line4 = 'This is line 4'
```

输出：

package.json
{
  "name": "vuepress-theme-plume",
  "version": "1.0.0"
}

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

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

const line2 = 'This is line 2'
const line3 = 'This is line 3'

const line3 = 'This is line 3'
const line4 = 'This is line 4'

5.2 代码块聚焦（默认启用）

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

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

输出：

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

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

5.3 颜色差异（默认启用）

```js
export default {
  data() {
    return {
      error: 'Removed',
      warning: 'Added'
    }
  }
}
```

输出：

export default {
  data() {
    return {
      error: 'Removed',
      warning: 'Added'
    }
  }
}

5.4 错误/警告标注（默认启用）

```js
export default {
  data() {
    return {
      error: 'Error',
      warning: 'Warning'
    }
  }
}
```

输出：

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

5.5 词高亮（默认启用）

```ts
const msg = 'Hello'
console.log(msg)     // prints Hello
```

```ts
const options = { foo: 'bar' }
options.foo = 'baz'
console.log(options.foo)
```

输出：

const msg = 'Hello'
console.log(msg)

const options = { foo: 'bar' }
options.foo = 'baz'
console.log(options.foo)

5.6 空白符可见（默认启用）

```xml :whitespace
<catalog>
    <book>
        <title>Everyday Italian</title>
    </book>
</catalog>
```

```js :whitespace=all
function foo( ) {
  return 'Hello World'
}
```

输出：

<catalog>
    <book>
        <title>Everyday Italian</title>
    </book>
</catalog>

function foo( ) {
  return 'Hello World'
}

5.7 折叠代码块（默认启用）

```css :collapsed-lines
html {
  margin: 0;
  background: black;
  height: 100%;
}

body {
  margin: 0;
  width: 100%;
  height: inherit;
}
```

```css :collapsed-lines=5
html {
  margin: 0;
  background: black;
  height: 100%;
}

body {
  margin: 0;
}
```

输出：

html {
  margin: 0;
  background: black;
  height: 100%;
}

body {
  margin: 0;
  width: 100%;
  height: inherit;
}

html {
  margin: 0;
  background: black;
  height: 100%;
}

body {
  margin: 0;
}

5.8 npm 命令转换（需启用）

::: npm-to
```sh
npm install vuepress vuepress-theme-plume
```
:::

::: npm-to tabs="pnpm,yarn,npm,bun,deno"
```sh
npm ci
```
:::

::: npm-to
```sh
npm install && npm run docs:dev
```
:::

输出：

npm

npm install vuepress vuepress-theme-plume

pnpm

pnpm add vuepress vuepress-theme-plume

pnpm

pnpm install --frozen-lockfile

yarn

yarn install --immutable

npm

npm ci

bun

bun install --frozen-lockfile

deno

deno install --frozen

npm

npm install && npm run docs:dev

pnpm

pnpm install && pnpm docs:dev

支持的命令：

npm install / npm i
npm run / npm run-script
npm init
npm create
npm uninstall / npm rm / npm remove / npm un
npm ci
npx

六、实用功能

6.1 缩写词（需启用）

The HTML specification is maintained by the W3C.

*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
*[W3C]: World Wide Web Consortium

输出：

The HTML specification is maintained by the W3C.

*[HTML]: Hyper Text Markup Language *[W3C]: World Wide Web Consortium

6.2 导入文件切片（默认启用）

<!-- 导入整个文件 -->
<!-- #include-env-start: /dev/shm/repo/piemoe-blog-dpmorzfeydus/docs/notes/dev -->
# 示例片段文件

这是用于 `@include` 演示的占位文件。

包含多行内容供测试导入功能使用。

第 5 行
第 6 行
第 7 行
最后一行

<!-- #include-env-end -->

<!-- 导入指定行 -->
<!-- #include-env-start: /dev/shm/repo/piemoe-blog-dpmorzfeydus/docs/notes/dev -->
description: 用于 @include 演示的示例片段文件，测试 Markdown 内容导入功能。
tags:
  - 示例
<!-- #include-env-end -->

<!-- 导入前5行 -->
<!-- #include-env-start: /dev/shm/repo/piemoe-blog-dpmorzfeydus/docs/notes/dev -->
<!-- #include-env-end -->

<!-- 导入最后3行 -->
<!-- #include-env-start: /dev/shm/repo/piemoe-blog-dpmorzfeydus/docs/notes/dev -->
<!-- #include-env-end -->

<!-- 导入文件区域 -->
<!-- #include-env-start: /dev/shm/repo/piemoe-blog-dpmorzfeydus/docs/notes/dev -->
<!-- #include-env-end -->

支持的语言：

HTML / Markdown / TS / JS / CSS / Less / Sass / Java / Python / C# / C/C++ / Bat / VB

6.3 字段容器（需启用）

:::: field-group

::: field theme
@type ThemeConfig
@required
@default {}

主题配置
:::

::: field enabled
@type boolean
@optional
@default true

是否启用
:::

::: field callback
@type (...args) => void
@optional
@default () => {}

<Badge type="tip" text="v1.0.0 新增" />
回调函数
:::

::: field deprecated
@type string
@deprecated

<Badge type="danger" text="v0.9.0 弃用" />
已弃用属性
:::

::::

输出：

themeRequiredThemeConfig

{}

主题配置

enabledOptionalboolean

true

是否启用

callbackOptional(...args) => void

() => {}

v1.0.0 新增

回调函数

deprecatedDeprecatedstring

v0.9.0 弃用

已弃用属性

6.4 Can I Use（需启用）

@[caniuse](css-matches-pseudo)

@[caniuse baseline](css-matches-pseudo)

输出：

@caniuse（在新窗口打开）

@caniuse baseline（在新窗口打开）

6.5 TwoSlash（需安装 + 启用）

安装：npm i @vuepress/shiki-twoslash，启用 codeHighlighter.twoslash: true

```ts twoslash
import { createHighlighter } from 'shiki'

const highlighter = await createHighlighter({
  themes: ['nord'],
  langs: ['javascript']
})
//      ^?
```

```ts twoslash
// @log: Custom log message
const a = 1
// @error: Custom error message
const b = 1
// @warn: Custom warning message
const c = 1
```

常用标记：

标记	说明
`^?`	提取类型
`^^^`	高亮范围
`^\|`	自动补全
`// @filename`	声明文件
`// ---cut---`	剪切代码
`// @showEmit`	显示编译输出

七、组件

7.1 Badge 徽章

VuePress - <Badge type="info" text="v2" />
VuePress - <Badge type="tip" text="v2" />
VuePress - <Badge type="warning" text="v2" />
VuePress - <Badge type="danger" text="v2" />
VuePress - <Badge text="v2" color="#8e5cd9" bg-color="rgba(159,122,234,0.16)" />

输出：

VuePress - v2
VuePress - v2
VuePress - v2
VuePress - v2
VuePress - v2

7.2 链接卡片

<LinkCard title="卡片标题" href="https://..." description="描述" />

<LinkCard icon="twemoji:astonished-face" title="卡片标题" href="/" />

<LinkCard href="/">
  <template #title>
    <span style="color: red">自定义标题</span>
  </template>
  卡片内容
</LinkCard>

7.3 图片卡片

<ImageCard
  image="/images/photo.webp"
  title="阿尔凡齐纳灯塔"
  description="位于葡萄牙南部海岸的美丽灯塔"
  author="Andreas Kunz"
  date="2024/08/16"
  href="/"
/>

八、注意事项

::: file-tree / ::: collapse 使用无序列表 * 语法，不是 -
折叠面板标题与内容之间必须有空行，且内容需要正确缩进
coverStyle.ratio 在 frontmatter 中使用 / 分隔符（如 ratio: 16/9），避免使用 :
::: qrcode 容器内文本过长可能导致二维码无法扫描
TwoSlash 会显著增加 VuePress 启动时间，包含较多该代码块时请注意
npm-to 仅支持单个代码块
马克笔两边需要有空格才能正确解析
图标使用 Iconify 图标名，如 material-symbols:home、mdi:github

九、参考链接

官方文档：https://theme-plume.vuejs.press/
LLMs 摘要：https://theme-plume.vuejs.press/llms.txt
LLMs 完整：https://theme-plume.vuejs.press/llms-full.txt
图标库：https://icon-sets.iconify.design/

出自宋·文天祥《过零丁洋》 ↩︎

版权所有

版权归属：AkaChou

许可证：署名 4.0 国际 (CC-BY-4.0)