--- url: /dev/ffc8dkaq/index.md description: >- VuePress Theme Plume 写作方法大全，涵盖 42 种 Markdown 扩展语法，包括提示容器、代码增强、Mermaid 图表、时间线、折叠面板等。 --- # Plume 主题写作方法大全 > 本文档详细整理自 [vuepress-theme-plume 官方文档](https://theme-plume.vuejs.press/)，涵盖所有 Markdown 扩展语法和写作功能。 *** ## 启用方式 以下功能默认不启用，需在 `.vuepress/plume.config.ts` 中开启： ```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` 包裹内容： ```md ::: note 内容 ::: ::: info 内容 ::: ::: tip 内容 ::: ::: warning 内容 ::: ::: caution 内容 ::: ::: details 点我展开 ::: ``` **可自定义标题：** ````md ::: caution 危险操作 请勿随意尝试！ ::: ::: details 点我看代码 ```js console.log('Hello!') ```` ::: ```` **输出效果：** ::: note 这是一个注释框 ::: ::: info 这是一个信息框 ::: ::: tip 这是一个提示框 ::: ::: warning 这是一个警告框 ::: ::: caution 这是一个危险警告框 ::: ::: details 点我展开 这是一个详情折叠框 ::: --- ### 1.2 GitHub 风格警报 ```md > [!NOTE] > 强调用户在快速浏览文档时也不应忽略的重要信息。 > [!TIP] > 有助于用户更顺利达成目标的建议性信息。 > [!IMPORTANT] > 对用户达成目标至关重要的信息。 > [!WARNING] > 因为可能存在风险，所以需要用户立即关注的关键内容。 > [!CAUTION] > 行为可能带来的负面影响。 ```` **输出效果：** > \[!NOTE] > 强调用户在快速浏览文档时也不应忽略的重要信息。 > \[!TIP] > 有助于用户更顺利达成目标的建议性信息。 > \[!IMPORTANT] > 对用户达成目标至关重要的信息。 > \[!WARNING] > 因为可能存在风险，所以需要用户立即关注的关键内容。 > \[!CAUTION] > 行为可能带来的负面影响。 *** ### 1.3 马克笔高亮（默认启用） 使用 `== ==` 进行标记： ```md vuepress-theme-plume 是一个 ==简洁美观== 的主题 ``` **输出：** vuepress-theme-plume 是一个 ==简洁美观== 的主题 **添加配色：** ```md ==一个提示=={.tip} ==一个警告=={.warning} ==一个错误=={.danger} ==重要内容=={.important} ``` **可用类型：** | 类型 | 语法 | 颜色 | |------|------|------| | default | `==文本==` | 默认颜色 | | info | `==文本=={.info}` | 蓝色 | | note | `==文本=={.note}` | 黄色 | | tip | `==文本=={.tip}` | 绿色 | | warning | `==文本=={.warning}` | 橙色 | | danger/caution | `==文本=={.danger}` | 红色 | | important | `==文本=={.important}` | 紫色 | **懒加载动画模式：** ```ts markdown: { mark: 'lazy', // 滚动到可视区域后再播放动画 } ``` *** ### 1.4 自定义对齐（默认启用） ```md ::: left 左对齐的内容 ::: ::: center 居中的内容 ::: ::: right 右对齐的内容 ::: ``` **输出：** ::: left 左对齐的内容 ::: ::: center 居中的内容 ::: ::: right 右对齐的内容 ::: *** ### 1.5 上下角标（默认启用） ```md 19^th^ H~2~O ``` **输出：** 19^th^ H~2~O *** ### 1.6 脚注（默认启用） ```md 人生自古谁无死，留取丹心照汗青[^脚注1]。 [^脚注1]: 出自 宋·文天祥《过零丁洋》 ``` **输出：** 人生自古谁无死，留取丹心照汗青\[^脚注1]。 \[^脚注1]: 出自 宋·文天祥《过零丁洋》 *** ### 1.7 自定义锚点 ```md # 使用自定义锚点 {#my-anchor} ``` 链接：`[跳转](#my-anchor)` *** ### 1.8 目录表 ```md [[TOC]] ``` *** ## 二、布局容器 ### 2.1 文件树（默认启用） ```md ::: file-tree - docs - .vuepress - ++ config.ts # ++ 新增（绿色） - -- page1.md # -- 删除（红色） - README.md - **Navbar.vue** # 加粗突出 - node/ # 目录末尾加 / 不展开子项 - … # … 占位符 ::: ::: file-tree icon="simple" title="项目结构" - src - index.ts - App.vue ::: ``` **输出：** ::: file-tree * docs * .vuepress * ++ config.ts * \-- page1.md * README.md * **Navbar.vue** * node/ * … ::: *** ### 2.2 步骤 ````md :::: steps 1. 步骤 1 ```ts console.log('Hello!') ``` 2. 步骤 2 相关内容 3. 步骤 3 ::: tip 提示容器 ::: :::: ```` **输出：** :::: steps 1. 步骤 1 ```ts console.log('Hello!') ``` 2. 步骤 2 相关内容 3. 步骤 3 ::: tip 提示容器 ::: :::: *** ### 2.3 选项卡 ````md ::: 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 橙子 橙子内容 ::: ```` **输出：** ::: 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 橙子 橙子内容 ::: *** ### 2.4 折叠面板（需启用） ```md ::: collapse * 标题 1 内容（标题与内容必须空一行） * :+ 标题 2 # :+ 默认展开 内容 * 标题 3 内容 ::: ::: collapse accordion # 手风琴模式 * 标题 1 内容 * 标题 2 内容 * 标题 3 内容 ::: ::: collapse expand # 默认全部展开 * 标题 1 内容 * :- 标题 2 # :- 标记折叠 内容 * 标题 3 内容 ::: ``` **输出：** ::: collapse * 标题 1 内容（标题与内容必须空一行） * :+ 标题 2 # :+ 默认展开 内容 * 标题 3 内容 ::: ::: collapse accordion * 标题 1 内容 * 标题 2 内容 * 标题 3 内容 ::: ::: collapse expand * 标题 1 内容 * :- 标题 2 内容 * 标题 3 内容 ::: *** ### 2.5 时间线（需启用） ```md ::: timeline * 节点一 time=2025-03-20 type=success 正文内容 * 节点二 time=2025-01-22 type=warning 正文内容 * 节点三 time=2025-01-22 type=danger icon=mdi:bookmark 正文内容 ::: ``` **输出：** ::: timeline * 节点一 time=2025-03-20 type=success 正文内容 * 节点二 time=2025-01-22 type=warning 正文内容 * 节点三 time=2025-01-22 type=danger icon=mdi:bookmark 正文内容 ::: **水平方向：** ```md ::: timeline horizontal * 节点一 time=2025-03-20 正文内容 * 节点二 time=2025-04-20 type=success 正文内容 * 节点三 time=2025-01-22 type=danger 正文内容 ::: ``` **输出：** ::: timeline horizontal * 节点一 time=2025-03-20 正文内容 * 节点二 time=2025-04-20 type=success 正文内容 * 节点三 time=2025-01-22 type=danger 正文内容 ::: **两端对齐：** ```md ::: timeline placement="between" * 节点一 time=2025-03-20 placement=right 正文内容 * 节点二 time=2025-04-20 type=success 正文内容 * 节点三 time=2025-01-22 type=danger placement=right 正文内容 ::: ``` **输出：** ::: timeline placement="between" * 节点一 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 卡片 + 卡片网格 ```md ::: card title="卡片标题" icon="twemoji:astonished-face" 卡片内容 ::: :::: card-grid ::: card title="卡片1" 内容 ::: ::: card title="卡片2" 内容 ::: :::: ``` **输出：** ::: card title="卡片标题" icon="twemoji:astonished-face" 卡片内容 ::: :::: card-grid ::: card title="卡片1" 内容 ::: ::: card title="卡片2" 内容 ::: :::: ---- ### 2.7 Flex 弹性布局 ```md ::: 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 ::: ``` **输出：** ::: 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 | ::: *** ### 2.8 示例窗口（默认启用） ```md ::: window title="标题" ### 三级标题 这是示例容器中的内容。 ::: ::: window ![hero](/images/cover.webp) ::: ``` **输出：** ::: window title="标题" ### 三级标题 这是示例容器中的内容。 ::: ::: window ![hero](/images/cover.webp) ::: *** ### 2.9 瀑布流（默认启用） ```md ::: 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` #### 流程图 ````md ```mermaid graph TB A --> B subgraph one A1 --> A2 end subgraph two B1 --> B2 end one --> two two --> C ``` ```` **输出：** ```mermaid graph TB A --> B subgraph one A1 --> A2 end subgraph two B1 --> B2 end one --> two two --> C ``` #### 时序图 ````md ```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? ``` ```` **输出：** ```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? ``` #### 类图 ````md ```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() } ``` ```` **输出：** ```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() } ``` #### 甘特图 ````md ```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 ``` ```` **输出：** ```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 ``` #### 饼图 ````md ```pie "选项A" : 40 "选项B" : 35 "选项C" : 25 ``` ```` **输出：** ```pie "选项A" : 40 "选项B" : 35 "选项C" : 25 ``` #### 思维导图 ````md ```mindmap root((VuePress)) Out of box Default theme Navbar Sidebar Darkmode Search Customize Theme Plume Plugins ``` ```` **输出：** ```mindmap root((VuePress)) Out of box Default theme Navbar Sidebar Darkmode Search Customize Theme Plume Plugins ``` #### Git 图 ````md ```git-graph commit id:"ash" tag:"abc" branch hotfix checkout hotfix commit checkout main merge hotfix ``` ```` **输出：** ```git-graph commit id:"ash" tag:"abc" branch hotfix checkout hotfix commit checkout main merge hotfix ``` #### 状态图 ````md ```state State Example [*] --> IsPositive IsPositive --> if_state if_state --> False: if n < 0 if_state --> True : if n >= 0 ``` ```` **输出：** ```state State Example [*] --> IsPositive IsPositive --> if_state if_state --> False: if n < 0 if_state --> True : if n >= 0 ``` #### ER 图 ````md ```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 } ``` ```` **输出：** ```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 } ``` #### 象限图 ````md ```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] ``` ```` **输出：** ```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 坐标图 ````md ```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] ``` ```` **输出：** ```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] ``` #### 块图 ````md ```block columns 3 前端 right 后端 space:2 down down 硬盘 left left 数据库 ``` ```` **输出：** ```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 视频（需启用） ```md @[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 二维码（需启用） ```md @[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](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) **参数说明：** | 参数 | 说明 | 默认值 | |------|------|------| | `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` 中注册： ```ts import Swiper from 'vuepress-theme-plume/features/Swiper.vue' export default defineClientConfig({ enhance: ({ app }) => { app.component('Swiper', Swiper) }, }) ``` ```md ``` **效果参数：** | 参数 | 说明 | 可选值 | |------|------|------| | `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 图片预览（默认启用） 点击文章中的图片可放大预览。 **忽略某些图片：** ```md ![alt](path/to/image){.no-view} ![alt](path/to/image){.ignore} ![alt](path/to/image){no-view} ``` *** ## 四、交互功能 ### 4.1 隐秘文本（需启用） ```md !!鼠标悬停看到我了!! !!点击看到我了!!{.click} !!模糊效果!!{.blur} !!遮罩层效果!!{.mask} !!遮罩+点击!!{.mask .click} !!模糊+悬停!!{.blur .hover} ``` **参数：** | 参数 | 说明 | |------|------| | `.hover` | 鼠标悬停触发（默认） | | `.click` | 点击触发 | | `.mask` | 遮罩层效果（默认） | | `.blur` | 模糊效果 | *** ### 4.2 对话记录（需启用） ```md ::: chat title="对话标题" {:2025-03-24 10:15:00} {用户A} 用户A的消息 {.} 本人的消息 {用户B} 用户B的消息 {.} 第二条本人消息 ::: ``` **输出：** ::: chat title="对话标题" {:2025-03-24 10:15:00} {用户A} 用户A的消息 {.} 本人的消息 {用户B} 用户B的消息 {.} 第二条本人消息 ::: **语法说明：** | 标记 | 说明 | |------|------| | `{:时间}` | 时间戳 | | `{用户名}` | 其他用户消息 | | `{.}` | 本人消息 | *** ### 4.3 代码树（需启用） ````md ::: code-tree title="Vue App" height="400px" entry="src/main.ts" ```vue title="src/components/HelloWorld.vue" ``` ```vue title="src/App.vue" ``` ```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 内容注释（需启用） ```md 站点由 VuePress [+vuepress] 驱动。 [+vuepress]: VuePress 是一个 [静态站点生成器](https://v2.vuepress.vuejs.org/) (SSG) 。 专为构建以内容为中心的站点而设计。 ``` **同标签多个定义：** ```md 中国古代 **四大名著** [+名著] 家喻户晓。 [+名著]: **《三国演义》：** 以三国时期的历史为背景... [+名著]: **《西游记》：** 讲述了唐僧师徒四人... [+名著]: **《红楼梦》：** 以贾、史、王、薛四大家族的兴衰... [+名著]: **《水浒传》：** 描写了北宋末年以宋江为首的108位好汉... ``` **输出：** 中国古代 **四大名著** [+名著] 家喻户晓。 [+名著]: **《三国演义》：** 以三国时期的历史为背景... [+名著]: **《西游记》：** 讲述了唐僧师徒四人... [+名著]: **《红楼梦》：** 以贾、史、王、薛四大家族的兴衰... [+名著]: **《水浒传》：** 描写了北宋末年以宋江为首的108位好汉... *** ## 五、代码增强 ### 5.1 代码块标题、行号、高亮（默认启用） ````md ```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' ``` ```` **输出：** ```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 { 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' ``` *** ### 5.2 代码块聚焦（默认启用） ````md ```js export default { data() { return { msg: 'Focused!' // [!code focus] } } } ``` ```js export default { data() { return { msg: 'Focused!' // [!code focus:2] } } } ``` ```` **输出：** ```js export default { data() { return { msg: 'Focused!' // [!code focus] } } } ``` ```js export default { data() { return { msg: 'Focused!' // [!code focus:2] } } } ``` *** ### 5.3 颜色差异（默认启用） ````md ```js export default { data() { return { error: 'Removed', // [!code --] warning: 'Added' // [!code ++] } } } ``` ```` **输出：** ```js export default { data() { return { error: 'Removed', // [!code --] warning: 'Added' // [!code ++] } } } ``` *** ### 5.4 错误/警告标注（默认启用） ````md ```js export default { data() { return { error: 'Error', // [!code error] warning: 'Warning' // [!code warning] } } } ``` ```` **输出：** ```js export default { data() { return { error: 'Error', // [!code error] warning: 'Warning' // [!code warning] } } } ``` *** ### 5.5 词高亮（默认启用） ````md ```ts const msg = 'Hello' // [!code word:Hello] console.log(msg) // prints Hello ``` ```ts // [!code word:options:2] const options = { foo: 'bar' } options.foo = 'baz' console.log(options.foo) ``` ```` **输出：** ```ts const msg = 'Hello' // [!code word:Hello] console.log(msg) ``` ```ts // [!code word:options:2] const options = { foo: 'bar' } options.foo = 'baz' console.log(options.foo) ``` *** ### 5.6 空白符可见（默认启用） ````md ```xml :whitespace Everyday Italian ``` ```js :whitespace=all function foo( ) { return 'Hello World' } ``` ```` **输出：** ```xml :whitespace Everyday Italian ``` ```js :whitespace=all function foo( ) { return 'Hello World' } ``` *** ### 5.7 折叠代码块（默认启用） ````md ```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; } ``` ```` **输出：** ```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; } ``` *** ### 5.8 npm 命令转换（需启用） ````md ::: 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-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 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 缩写词（需启用） ```md 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 导入文件切片（默认启用） ```md ``` **支持的语言：** HTML / Markdown / TS / JS / CSS / Less / Sass / Java / Python / C# / C/C++ / Bat / VB *** ### 6.3 字段容器（需启用） ```md :::: field-group ::: field theme @type ThemeConfig @required @default {} 主题配置 ::: ::: field enabled @type boolean @optional @default true 是否启用 ::: ::: field callback @type (...args) => void @optional @default () => {} 回调函数 ::: ::: field deprecated @type string @deprecated 已弃用属性 ::: :::: ``` **输出：** :::: field-group ::: field theme @type ThemeConfig @required @default {} 主题配置 ::: ::: field enabled @type boolean @optional @default true 是否启用 ::: ::: field callback @type (...args) => void @optional @default () => {} ::: field deprecated @type string @deprecated :::: *** ### 6.4 Can I Use（需启用） ```md @[caniuse](css-matches-pseudo) @[caniuse baseline](css-matches-pseudo) ``` **输出：** @[caniuse](css-matches-pseudo) @[caniuse baseline](css-matches-pseudo) *** ### 6.5 TwoSlash（需安装 + 启用） 安装：`npm i @vuepress/shiki-twoslash`，启用 `codeHighlighter.twoslash: true` ````md ```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 徽章 ```md VuePress - VuePress - VuePress - VuePress - VuePress - ``` **输出：** * VuePress - * VuePress - * VuePress - * VuePress - * VuePress - *** ### 7.2 链接卡片 ```md 卡片内容 ``` *** ### 7.3 图片卡片 ```md ``` *** ## 八、注意事项 1. **`::: file-tree` / `::: collapse`** 使用无序列表 `*` 语法，不是 `-` 2. **折叠面板**标题与内容之间必须有空行，且内容需要正确缩进 3. **`coverStyle.ratio`** 在 frontmatter 中使用 `/` 分隔符（如 `ratio: 16/9`），避免使用 `:` 4. **`::: qrcode` 容器**内文本过长可能导致二维码无法扫描 5. **TwoSlash** 会显著增加 VuePress 启动时间，包含较多该代码块时请注意 6. **npm-to** 仅支持单个代码块 7. **马克笔**两边需要有空格才能正确解析 8. **图标**使用 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/