标题 H2

标题 H3

标题 H4

标题 H5

标题 H6

标题 2 Badge Badge

标题 3 Badge Badge

标题 4 Badge Badge

正文内容。

@property CSS at-rule 是 CSS Houdini API 的一部分，它允许开发者显式地定义他们的 CSS 自定义属性, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。

@property 的出现，极大的增强了 CSS 的能力。

加粗：加粗文字

斜体： 斜体文字

删除文字

内容 标记

数学表达式： $-(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

内容居中

内容右对齐

• 无序列表 1
• 无序列表 2
• 无序列表 3

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

• 任务列表 1
• 任务列表 2
• 任务列表 3
• 任务列表 4

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

引用内容

引用内容

链接

外部链接

块状链接：

前往 VuePress 官网 了解更多

Badge：

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

图标：

• home -
• vscode -
• twitter -

demo wrapper：

示例

main

aside

代码：

const a = 1;
const b = 2;
const c = a + b;

const obj = {
  toLong: {
    deep: {
      deep: {
        deep: {
          value:
            "this is to long text. this is to long text. this is to long text. this is to long text.",
        },
      },
    },
  },
};

Code Blocks TwoSlash：

const 
welcome
 = "Tudo bem gente?";
const 
words
 = 
welcome
.contains(" ");
Property 'contains' does not exist on type '"Tudo bem gente?"'.

import 
express
 from "express";
Cannot find module 'express' or its corresponding type declarations.
const 
app
 = 
express
();
app
.get("/", (req, res) => {
Parameter 'res' implicitly has an 'any' type.
Parameter 'req' implicitly has an 'any' type.
  
res
.send;
});
app
.listen(3000);

import { 
createHighlighter
 } from "shiki";

const 
highlighter
 = await 
createHighlighter
({
  
themes
: ["nord"],
  
langs
: ["javascript"],
});
const 
a
 = 1;
Custom log message
const 
b
 = 1;
Custom error message
const 
c
 = 1;
Custom warning message
Custom annotation message

interface Todo {
  
title
: string;
}

const 
todo
: 
Readonly
<Todo> = {
  
title
: "Delete inactive users".
toUpperCase
(),
};

todo
.title = "Hello";
Cannot assign to 'title' because it is a read-only property.

Number
.p
arseInt
("123", 10);

//
//

<script setup lang="ts">
import { 
ref
 } from "vue";

const 
count
 = 
ref
(0);
</script>

<template>
  <
p
></
p
>
</template>

代码分组：

tab1

const a = 1;
const b = 2;
const c = a + b;

tab2

const a: number = 1;
const b: number = 2;
const c: number = a + b;

代码块高亮：

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;
}

仅标题

注释

const a = 1;
const b = 2;
const c = a + b;

信息

const a = 1;
const b = 2;
const c = a + b;

提示

const a = 1;
const b = 2;
const c = a + b;

警告

const a = 1;
const b = 2;
const c = a + b;

错误

const a = 1;
const b = 2;
const c = a + b;

重要

const a = 1;
const b = 2;
const c = a + b;

详细标题

这里是内容。

GFM alert：

注

note

---

相关信息

info

---

提示

tip

---

注意

warning

---

警告

caution

---

重要

important

代码演示：

常规示例

一个常规示例

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;
}

选项卡：

标题 1

内容区块

标题 2

内容区块

注意

标题 1

内容区块

标题 2

内容区块

脚注：

脚注 1 链接^[1]。

脚注 2 链接^[2]。

行内的脚注^[3] 定义。

重复的页脚定义^[2:1]。

---

1. 脚注 可以包含特殊标记

   也可以由多个段落组成 ↩︎

2. 脚注文字。 ↩︎ ↩︎

3. 行内脚注文本 ↩︎

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24