惊蛰

外观

vuepress-plume 中的特殊 markdown 语法

约 979 字大约 3 分钟

2025-06-26

代码折叠

 :collapsed-lines

默认 15 行折叠

代码效果预览

::: demo [html] title="title" desc="desc 行" expanded
`code content`
:::

title

desc `<br />` 用于把内容换到下一行

<div>这个组件可以直接预览代码的效果</div>
<div>expanded 控制代码是否默认展开</div>

文件树

::: file-tree icon="simple"

- docs
  - .vuepress
    - ++ config.ts
  - -- page1.md
  - README.md
- theme 一个 **主题** 目录
  - client
    - components
      - **Navbar.vue**
    - composables
      - useNavbar.ts
    - styles
      - navbar.css
    - config.ts
  - node/
- package.json
- pnpm-lock.yaml
- .gitignore
- README.md
- …
  :::

docs

.vuepress

config.ts

page1.md

README.md

theme一个 主题 目录

client

components

Navbar.vue

composables

useNavbar.ts

styles

navbar.css

config.ts

node

package.json

pnpm-lock.yaml

.gitignore

README.md

…

代码树

::: code-tree title="Project Name" height="400px" entry="filepath"
   ```vue title="App.vue" :active
   <template>
   <div id="app">
      <h3>vuepress-theme-plume</h3>
      <HelloWorld />
   </div>
   </template>
   ```

:::
Project Name

App.vue

App.vue
<template>
  <div id="app">
    <h3>vuepress-theme-plume</h3>
    <HelloWorld />
  </div>
</template>

自定义容器

自定义容器可以通过它们的类型、标题和内容来定义。

::: note
This is a note box
:::

注

This is a note box

相关信息

This is an info box.

提示

This is a tip.

注意

This is a warning.

警告

This is a caution warning.

详情

This is a details block.

马克笔

马克笔 是对 Markdown 中的的标记语法 Mark 的扩展，支持在内容中使用多种不同的颜色来标记文本， 还可以方便灵活的自定义更多不同的马克笔颜色。

常规

使用 == == 进行标记。请注意两边需要有空格。

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

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

配色

在 标记语法 Mark 之后紧跟 {.classname}，可以为马克笔设置不同的颜色。

  • ==Default== Default
  • ==Info=={.info} Info
  • ==note=={.note} note
  • tip: Tip - Tip
  • warning: Warning - Warning
  • danger: Danger - Danger
  • caution: Caution - Caution
  • important: Important - Important

隐秘文本

读者不能直接阅读到完整的内容，部分的内容被 “遮住”，需要鼠标悬停到内容上，才能看到被遮住的内容。


!!需要隐秘的内容!!

需要隐秘的内容

  • 需要隐秘的内容
  • 需要隐秘的内容
  • 需要隐秘的内容
  • 需要隐秘的内容
  • 需要隐秘的内容

卡片


<!-- 单个卡片 -->

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

标题

🎉 这里是卡片内容。

卡片标题 1

这里是卡片内容。

卡片标题 2

这里是卡片内容。

步骤

  1. 步骤 1

    console.log("Hello World!");

  2. 步骤 2

    这里是步骤 2 的相关内容

  3. 步骤 3

    提示

    提示容器

  4. 结束

时间线

节点一

正文内容

2025-03-20

节点二

正文内容

2025-02-21

节点三

正文内容

2025-01-22

内部链接

有三种方式来使用内部链接：

  • 使用 生成的 permalink 作为内部链接的目标。
  • 使用 md 文件的相对路径作为内部链接的目标。
  • 使用 md 文件的绝对路径作为内部链接的目标， 绝对路径 / 表示从 ${sourceDir} 目录开始。
[Markdown](/preview/markdown.md)

Markdown

mermaid

提示

在 config.js 中开启

Bilibili 视频

简单的语法：

@[bilibili](bvid)

带 分 P 的视频，在 bilibili 后跟随 p1、p2、p3 等选项

@[bilibili p1](aid cid)
<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=114716059898820&bvid=BV1DmKPztEVD&cid=25814766609&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>