外观
编写教程
多级标题
#### 标题H4
##### 标题H5
###### 标题H6标题H4
标题H5
标题H6
图片
图标
- 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" />- home -
- vscode -
- twitter -
徽章
- <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
带徽章标题
#### 标题 <Badge type="tip" text="Badge" />
#### 标题 <Badge type="warning" text="Badge" />
#### 标题 <Badge type="danger" text="Badge" />标题 Badge
标题 Badge
标题 Badge
正文内容
这是一段正文内容。这是一段正文内容。
内部 / 外部链接
内部链接：[点我](/)
外部链接：[GitHub](https://github.com)
`@property` CSS at-rule是 [CSS Houdini API](https://developer.mozilla.org/zh-CN/docs/Web/Guide/Houdini)
的一部分，它允许开发者显式地定义他们的 [CSS 自定义属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/--*),
允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。
`@property` 的出现，极大的增强了 CSS 的能力。内部链接：点我
外部链接：GitHub
@property CSS at-rule是 CSS Houdini API 的一部分，它允许开发者显式地定义他们的 CSS 自定义属性, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。
@property 的出现，极大的增强了 CSS 的能力。
文本样式
加粗：**加粗文字**
斜体： _斜体文字_
删除线：~~删除文字~~
文本标记：
- default: ==Default==
- info: ==Info=={.info}
- note: ==Note=={.note}
- tip: ==Tip=={.tip}
- warning: ==Warning=={.warning}
- danger: ==Danger=={.danger}
- caution: ==Caution=={.caution}
- important: ==Important=={.important}加粗：加粗文字
斜体： 斜体文字
删除线：删除文字
文本标记：
- default: Default
- info: Info
- note: Note
- tip: Tip
- warning: Warning
- danger: Danger
- caution: Caution
- important: Important
数学表达式
$-(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~
19th
H2O
对齐方式
::: center
内容居中
:::
::: right
内容右对齐
:::内容居中
内容右对齐
有序 / 无序 / 任务列表
- 无序列表1
- 无序列表2
- 无序列表3- 无序列表1
- 无序列表2
- 无序列表3
1. 有序列表1
2. 有序列表2
3. 有序列表3- 有序列表1
- 有序列表2
- 有序列表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 || Tables | Are | Cool |
|---|---|---|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
引用内容
> 引用内容引用内容
选项卡
::: tabs
@tab 标题1
内容区块1
@tab 标题2
内容区块2
:::标题1
内容区块
标题2
内容区块
html示例
::: demo-wrapper title="示例" no-padding height="100px"
<style scoped>
.open-door {
display: flex;
gap: 20px;
padding: 20px;
}
.open-door .main {
background: #ccc;
}
</style>
<div class="open-door">
<div class="main">main</div>
<div class="aside">aside</div>
</div>
:::示例
main
aside
代码
普通代码块
```js
const a = 1
const b = 2
const c = a + b
const obj = {
a: 1,
b: 2, // [!code highlight]
c: 3
} ```const a = 1
const b = 2
const c = a + b
const obj = {
a: 1,
b: 2,
c: 3
}代码分组
::: code-tabs
@tab HTML
```html ```
@tab Javascript
```js ```
@tab CSS
```css ```
:::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 = aCSS
#app {
font-size: 2em;
text-align: center;
}代码块高亮
function foo() {
const a = 1 // [!code highlight]
console.log(a)
const b = 2 // [!code ++]
const c = 3 // [!code --]
console.log(a + b + c) // [!code error]
console.log(a + b) // [!code warning]
}function foo() {
const a = 1
console.log(a)
const b = 2
const c = 3
console.log(a + b + c)
console.log(a + b)
}代码块聚焦
function foo() {
const a = 1 // [!code focus]
}function foo() {
const a = 1
}高亮块与折叠块
::: tip 仅标题
:::仅标题
::: details 详细标题
这里是内容。
:::详细标题
这里是内容。
> [!note]
> note
> [!info]
> info
> [!tip]
> tip
> [!warning]
> warning
> [!caution]
> caution
> [!important]
> important注
note
相关信息
info
提示
tip
注意
warning
警告
caution
重要
important
emoji🎉
使用方式：
:100:效果：💯
脚注
脚注 1 链接[^first]。
脚注 2 链接[^second]。
行内的脚注^[行内脚注文本] 定义。
重复的页脚定义[^second]。
[^first]: 脚注 **可以包含特殊标记**
也可以由多个段落组成
[^second]: 脚注文字。脚注 1 链接[1]。
脚注 2 链接[2]。
行内的脚注[3] 定义。
重复的页脚定义[2:1]。