6.0 KiB
title | tags | createTime | permalink | |
---|---|---|---|---|
Markdown |
|
2025/04/20 21:49:49 | /article/dsw2e41q/ |
标题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^
H~2~O
::: center 内容居中 :::
::: right 内容右对齐 :::
- 无序列表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 |
引用内容
引用内容
Badge:
图标:
- home -
- vscode -
- twitter -
demo wrapper:
::: demo-wrapper title="示例" no-padding height="200px"
:::
代码:
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:
// @errors: 2339
const welcome = 'Tudo bem gente?'
const words = welcome.contains(' ')
import express from 'express'
const app = express()
app.get('/', (req, res) => {
res.send
})
app.listen(3000)
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
// @errors: 2540
interface Todo {
title: string
}
const todo: Readonly<Todo> = {
title: 'Delete inactive users'.toUpperCase(),
// ^?
}
todo.title = 'Hello'
Number.parseInt('123', 10)
// ^|
//
//
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<p>{{ count }}</p>
</template>
代码分组:
::: 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]
}
::: tip 仅标题 :::
::: note 注释
注释内容 link inline code
const a = 1
const b = 2
const c = a + b
:::
::: info 信息
信息内容 link inline code
const a = 1
const b = 2
const c = a + b
:::
::: tip 提示
提示内容 link inline code
const a = 1
const b = 2
const c = a + b
:::
::: warning 警告
警告内容 link inline code
const a = 1
const b = 2
const c = a + b
:::
::: caution 错误
错误内容 link inline code
const a = 1
const b = 2
const c = a + b
:::
::: important 重要
重要内容 link inline code
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
<div id="app">
<h3>vuepress-theme-plume</h3>
</div>
@tab Javascript
const a = 'So Awesome!'
const app = document.querySelector('#app')
app.appendChild(window.document.createElement('small')).textContent = a
@tab CSS
#app {
font-size: 2em;
text-align: center;
}
::: ::::
选项卡:
::: tabs @tab 标题1 内容区块
@tab 标题2 内容区块 :::
:::: warning ::: tabs @tab 标题1 内容区块
@tab 标题2 内容区块 ::: ::::
脚注:
脚注 1 链接1。
脚注 2 链接2。
行内的脚注^[行内脚注文本] 定义。
重复的页脚定义2。