---
title: 主题效果预览
author: Plume Theme
createTime: 2023/12/25 01:28:29
permalink: /article/0lk24ty5/
sticky: true
tags: 
  - 预览
  - 标签
---

# 标题H1

## 标题H2

### 标题H3

#### 标题H4

##### 标题H5

###### 标题H6

## 标题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](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~2~O

::: 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 |

> 引用内容
>
> 引用内容

[链接](/)

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

![image](/images/1px-lines.png)

![image](/images/1px-lines.png)

**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 - <Icon name="material-symbols:home" color="currentColor" size="1em" />
- vscode - <Iconify name="skill-icons:vscode-dark" size="2em" />
- twitter - <Iconify name="skill-icons:twitter" size="2em" />


**代码**

```js
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 highlight]
        }
      }
    }
  }
}
```

**代码分组**

::: code-tabs
@tab tab1
```js
const a = 1
const b = 2
const c = a + b
```
@tab tab2
```ts
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]
}
```

**代码块聚焦**

```ts
function foo() {
  const a = 1  // [!code focus]
}
```

::: note 注释
注释内容 [link](https://github.com/pengzhanbo) `inline code`
```js
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
```
:::

::: warning 警告
警告内容 [link](https://github.com/pengzhanbo) `inline code`
```js
const a = 1
const b = 2
const c = a + b
```
:::

::: caution 错误
错误内容 [link](https://github.com/pengzhanbo) `inline code`
```js
const a = 1
const b = 2
const c = a + b
```
:::

::: important 重要
重要内容 [link](https://github.com/pengzhanbo) `inline code`
```js
const a = 1
const b = 2
const c = a + b
```
:::


**代码演示**

::: normal-demo Demo 演示

```html
<h1>Hello Word!</h1>
<p><span id="very">非常</span>强大!</p>
```

```js
document.querySelector("#very").addEventListener("click", () => {
  alert("非常强大");
});
```

```css
span {
  color: red;
}
```

:::
