Markdown示例

约 1182 字大约 4 分钟

markdown示例

标题H2

标题H3

标题H4

标题H5

标题H6


## 标题H2

### 标题H3

#### 标题H4

##### 标题H5

###### 标题H6

标题2 Badge Badge

标题3 Badge Badge

标题4 Badge Badge


## 标题2 Badge <Badge type="tip" text="Badge" />

### 标题3 Badge <Badge type="warning" text="Badge" />

#### 标题4 Badge <Badge type="danger" text="Badge" />

正文内容。

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

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

`@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 的能力。

加粗：加粗文字

斜体： 斜体文字

~~删除文字~~

内容标记

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


19^th^

H~2~O

内容居中

内容右对齐

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

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

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

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

引用内容
引用内容

> 引用内容
>
> 引用内容

链接

外部链接


[链接](/)

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

![plume](/plume.svg)

Badge：

info badge
tip badge
warning badge
danger badge

**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" />

图标：

home -
vscode -
twitter -

**图标：**

- 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" />

示例容器：

示例

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.',
        }
      }
    }
  }
}

代码分组：

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

**代码分组：**

::: code-tabs
@tab tab1

```js
const a = 1
const b = 2
const c = a + b

@tab tab2

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

:::


**代码块高亮：**

```ts
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
}

仅标题

注释

注释内容 link inline code

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

信息

信息内容 link inline code

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


::: info 信息
信息内容 [link](https://github.com/pengzhanbo) `inline code`

```js
const a = 1
const b = 2
const c = a + b



::: tip 提示
提示内容 [link](https://github.com/pengzhanbo) `inline code`

```js
const a = 1
const b = 2
const c = a + b

:::

警告

警告内容 link inline code

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

错误

错误内容 link inline code

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

重要

重要内容 link inline code

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

详细标题

这里是内容。

GFM alert：

笔记

note

信息

info

提示

tip

警告

warning

注意

caution

重要

important

代码演示：

:::: demo title="常规示例" desc="一个常规示例"

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]。

脚注 可以包含特殊标记
也可以由多个段落组成 ↩︎
脚注文字。 ↩︎ ↩︎
行内脚注文本 ↩︎