vuepress-theme-plume/docs/2.preview/主题效果预览.md

title, author, createTime, permalink, sticky, tags

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

标题H1

标题H2

标题H3

标题H4

标题H5

标题H6

标题2 Badge

标题3 Badge

标题4 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^

H2O

::: center 内容居中 :::

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

• 无序列表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

引用内容

引用内容

链接

外部链接

Badge

图标

• home -
• vscode -
• twitter -

代码

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

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

:::

代码块高亮

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  // [!code focus]
}

::: note 注释 注释内容 :::

::: info 信息 信息内容 :::

::: tip 提示 提示内容

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

:::

::: warning 警告 警告内容

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

:::

::: caution 错误 错误内容

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

:::

::: important 重要 重要内容

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

:::

::: info 代码

const a = 1
const b = 2

:::

代码演示

::: normal-demo Demo 演示

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

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

span {
  color: red;
}

:::