docs: 全新文档

newdocs/docs/preview/custom-component.example.md

@@ -0,0 +1,10 @@
+---
+title: 自定义组件
+tags:
+  - 预览
+  - 组件
+createTime: 2025/04/20 21:49:49
+permalink: /article/7zjuzrb4/
+---
+
+<CustomComponent />

newdocs/docs/preview/markdown.md

@@ -0,0 +1,410 @@
+---
+title: Markdown
+tags:
+  - markdown
+createTime: 2025/04/20 21:49:49
+permalink: /article/dsw2e41q/
+---
+
+## 标题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)
+
+![plume](/plume.svg)
+
+**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 - <Icon name="skill-icons:vscode-dark" size="2em" />
+- twitter - <Icon name="skill-icons:twitter" size="2em" />
+
+**demo wrapper：**
+
+::: demo-wrapper title="示例" no-padding height="200px"
+<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>
+
+:::
+
+**代码：**
+
+```js whitespace
+const a = 1
+const b = 2
+const c = a + b
+
+// [!code word:obj]
+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 Blocks TwoSlash：**
+
+```ts twoslash
+// @errors: 2339
+const welcome = 'Tudo bem gente?'
+const words = welcome.contains(' ')
+```
+
+```ts twoslash
+import express from 'express'
+const app = express()
+app.get('/', (req, res) => {
+  res.send
+})
+app.listen(3000)
+```
+
+```ts twoslash
+import { createHighlighter } from 'shiki'
+
+const highlighter = await createHighlighter({ themes: ['nord'], langs: ['javascript'] })
+// @log: Custom log message
+const a = 1
+// @error: Custom error message
+const b = 1
+// @warn: Custom warning message
+const c = 1
+// @annotate: Custom annotation message
+```
+
+```ts twoslash
+// @errors: 2540
+interface Todo {
+  title: string
+}
+
+const todo: Readonly<Todo> = {
+  title: 'Delete inactive users'.toUpperCase(),
+//  ^?
+}
+
+todo.title = 'Hello'
+
+Number.parseInt('123', 10)
+//      ^|
+
+//
+//
+```
+
+```vue twoslash
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const count = ref(0)
+</script>
+
+<template>
+  <p>{{ count }}</p>
+</template>
+```
+
+**代码分组：**
+
+::: 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]
+}
+```
+
+::: tip 仅标题
+:::
+
+::: 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
+```
+
+:::
+
+::: details 详细标题
+
+这里是内容。
+:::
+
+**GFM alert：**
+
+> [!note]
+> note
+
+> [!info]
+> info
+
+> [!tip]
+> tip
+
+> [!warning]
+> warning
+
+> [!caution]
+> caution
+
+> [!important]
+> important
+
+**代码演示：**
+
+:::: demo title="常规示例" desc="一个常规示例"
+
+::: code-tabs
+@tab HTML
+
+```html
+<div id="app">
+  <h3>vuepress-theme-plume</h3>
+</div>
+```
+
+@tab Javascript
+
+```js
+const a = 'So Awesome!'
+const app = document.querySelector('#app')
+app.appendChild(window.document.createElement('small')).textContent = a
+```
+
+@tab CSS
+
+```css
+#app {
+  font-size: 2em;
+  text-align: center;
+}
+```
+
+:::
+::::
+
+**选项卡：**
+
+::: tabs
+@tab 标题1
+内容区块
+
+@tab 标题2
+内容区块
+:::
+
+:::: warning
+::: tabs
+@tab 标题1
+内容区块
+
+@tab 标题2
+内容区块
+:::
+::::
+
+**脚注：**
+
+脚注 1 链接[^first]。
+
+脚注 2 链接[^second]。
+
+行内的脚注^[行内脚注文本] 定义。
+
+重复的页脚定义[^second]。
+
+[^first]: 脚注 **可以包含特殊标记**
+
+    也可以由多个段落组成
+
+[^second]: 脚注文字。