Flex 容器

• official-docs

props

• 在 主轴 方向上，使用 center / between / around 指定对齐方式；
• 在 交叉轴 方向上，使用 start / center / end 指定对齐方式；
• 使用 gap="20" 指定间距；
• 使用 column 指定主轴方向为垂直方向。

::: flex around center

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

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

:::

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

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

card

• official-docs

:::: card-grid
::: card title="卡片标题 1" icon="twemoji:astonished-face"

这里是卡片内容。
:::

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

这里是卡片内容。
:::
::::

卡片标题 1

这里是卡片内容。

卡片标题 2

这里是卡片内容。

选项组

• official-docs

::: tabs
@tab npm

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

@tab pnpm

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

:::

npm

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

pnpm

corepack enable
corepack use pnpm@8

图片卡片

• official-docs

<CardGrid>
  <ImageCard
    image="https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp"
    title="阿尔凡齐纳灯塔，阿尔加维，葡萄牙"
    description="..."
    href="/"
    author="Andreas Kunz"
    date="2024/08/16"
  />
  <ImageCard
    image="https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp"
    title="阿尔凡齐纳灯塔，阿尔加维，葡萄牙"
    description="..."
    href="/"
    author="Andreas Kunz"
    date="2024/08/16"
  />
</CardGrid>

阿尔凡齐纳灯塔，阿尔加维，葡萄牙

Andreas Kunz | 2024年8月16日

...

阿尔凡齐纳灯塔，阿尔加维，葡萄牙

Andreas Kunz | 2024年8月16日

...

bilibili

@[bilibili p1 autoplay time="0" width="100%" height="400px" ratio="16:9"](bvid aid cid)

table

• official-docs

props

• title(string-opt): 表格标题，显示在表格的下方
• align(['left' | 'center' | 'right']-opt): 表格对齐方式
• copy([boolean | 'all' | 'html' | 'md']-opt): 在表格的右上角显示复制按钮，可以复制为 html / markdown
• maxContent(boolean-opt): 行内元素不再自动换行，超出容器宽度时表格显示滚动条
• hl-rows="tip:1;warning:2;important:3,4"
• hl-cols="success:1;warning:2;danger:3,4"
• hl-cells="danger:(1,1)(2,2);success:(3,3)(4,4);warning:(1,4)(2,3);important:(3,2)(4,1)"

::: table title="这是表格标题" align="center" max-content
| ID | Description                                                                 | Status       |
|----|-----------------------------------------------------------------------------|--------------|
| 1  | This is an extremely long description that should trigger text wrapping in most table implementations. | In Progress  |
| 2  | Short text                                                                  | ✅ Completed |
:::

ID	Description	Status
1	This is an extremely long description that should trigger text wrapping in most table implementations.	In
Progress
2	Short text	✅ Completed

这是表格标题

图标

• official-docs
• icon-sets.iconify

- home - <Icon name="material-symbols:home" color="currentColor" size="1em" />
- vscode - <Icon name="skill-icons:vscode-dark" size="2em" />
- twitter - <Icon name="skill-icons:twitter" size="2em" />
- idea - <Icon name="skill-icons:idea-dark" size="2em" />

• home -
• vscode -
• twitter -
• idea -

步骤

• official-docs

:::: steps

1. 步骤 1

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

2. 步骤 2

   这里是步骤 2 的相关内容

3. 步骤 3

   ::: tip
   提示容器
   :::

4. 结束
   ::::

1. 步骤 1

   console.log('Hello World!')

2. 步骤 2

   这里是步骤 2 的相关内容

3. 步骤 3

   提示

   提示容器

4. 结束

文件树

• official-docs

::: file-tree

- 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

…

表达式

数学表达式： $-(2^{n-1})$ ~ $2^{n-1} -1$

$\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right)
= \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^ Ir \cdots (r-i+1) (\log y)^{ri}} {\omega^i} \right\}$

19^th^

H~2~O

数学表达式： $-(2^{n-1})$ ~ $2^{n-1} -1$

$\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right) = \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^ Ir \cdots (r-i+1) (\log y)^{ri}} {\omega^i} \right\}$

19^th

H₂O

badge

- <Badge type="info" text="info badge" />
- <Badge type="tip" text="tip badge" />
- <Badge type="warning" text="warning badge" />
- <Badge type="danger" text="danger badge" />

• info badge
• tip badge
• warning badge
• danger badge

code

[!code warning]

#include <stdio.h>

int main() {
    printf("Hello, World!\n");
    return 0;
}

[!code word:std] | [!code highlight] | [!code error]

#include <iostream>
using namespace std;

int main() {
    cout << "Hello, World!" << endl;
    return 0
}

[!code ++]

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

[!code --]

print("Hello, World!")

[!code focus]

package main

import "fmt"

func main() {
    fmt.Println("Hello, World!")
}

代码演示

常规示例

一个常规示例

HTML

<div id="app">
    <h3>vuepress-theme-plume</h3>
</div>

Javascript

const a = 'So Awesome!'
const app = document.querySelector('#app')
app.appendChild(window.document.createElement('small')).textContent = a

CSS

#app {
    font-size: 2em;
    text-align: center;
}

common

`ha ji mi`  man bo ~

加粗：**加粗文字**

斜体： *斜体文字*

~~删除文字~~

内容 ==标记==

> 引用内容
>
> 引用内容

[链接](/)

[外部链接](https://github.com/caobaoqi6040)

![caobaoqi6040](/caobaoqi6040.jpg)

::: center
内容居中
:::

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

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

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

- [ ] 任务列表1
- [ ] 任务列表2
- [x] 任务列表3
- [x] 任务列表4

| Tables        |      Are      |  Cool |
|---------------|:-------------:|------:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      |   centered    |   $12 |
| zebra stripes |   are neat    |    $1 |

> [!note]
> note

> [!info]
> info

> [!tip]
> tip

> [!warning]
> warning

> [!caution]
> caution

> [!important]
> important

更新日志

2025/9/28 13:09

查看所有更新日志

• 178b8-🎉 init: 美丽的鸡于 2025/9/28

版权所有

版权归属：HMM

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