Skip to content

主题效果预览

1004字约3分钟

预览标签

2023-12-25

标题H1

标题H2

标题H3

标题H4

标题H5
标题H6

标题2 Badge Badge

标题3 Badge Badge

标题4 Badge Badge

正文内容。

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

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

加粗:加粗文字

斜体: 斜体文字

删除文字

内容 标记

数学表达式: (2n1)-(2^{n-1}) ~ 2n112^{n-1} -1

rωr(yωω)=(yωω){(logy)r+i=1r(1)Ir(ri+1)(logy)riωi}\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\}

19th

H2O

内容居中

内容右对齐

  • 无序列表1
  • 无序列表2
  • 无序列表3
  1. 有序列表1
  2. 有序列表2
  3. 有序列表3
TablesAreCool
col 3 isright-aligned$1600
col 2 iscentered$12
zebra stripesare neat$1

引用内容

引用内容

链接

外部链接

plume

Badge:

  • info badge
  • tip badge
  • warning badge
  • danger badge

图标:

  • home -
  • vscode -
  • twitter -

demo wrapper:

示例

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

Code Blocks TwoSlash:

const 
welcome
= 'Tudo bem gente?'
const
words
=
welcome
.contains(' ')
Property 'contains' does not exist on type '"Tudo bem gente?"'.
import 
express
from 'express'
const
app
=
express
()
app
.
get
('/', (
req
,
res
) => {
res
.
send
})
app
.
listen
(3000)
import { 
getHighlighterCore
} from 'shiki/core'
const
highlighter
= await
getHighlighterCore
({})
const
a
= 1
Custom log message
const
b
= 1
Custom error message
const
c
= 1
Custom warning message
Custom annotation message
interface Todo {
  
title
: string
} const
todo
:
Readonly
<Todo> = {
title
: 'Delete inactive users'.
toUpperCase
(),
}
todo
.title = 'Hello'
Cannot assign to 'title' because it is a read-only property.
Number
.p
arseInt
('123', 10)
// //
<script setup lang="ts">
import { 
ref
} from 'vue'
const
count
=
ref
(0)
</script> <template> <
p
>{{ count }}</
p
>
</template>

代码分组:

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

代码块高亮:

function foo() {
  const a = 1

  console.log(a)

  const b = 2
  const c = 3

  console.log(a + b + c)
  console.log(a + b)
}

代码块聚焦:

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

提示

提示内容 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

重要

重要内容 link inline code

const a = 1
const b = 2
const c = a + b
详细标题

这里是内容。

GFM alert:

note

相关信息

info

提示

tip

注意

warning

警告

caution

重要

important

代码演示:

Demo 演示
<h1>Hello Word!</h1>
<p><span id="very">非常</span>强大!</p>
document.querySelector('#very').addEventListener('click', () => {
  alert('非常强大')
})
span {
  color: red;
}

选项卡:

标题1

内容区块

注意

标题1

内容区块

脚注:

脚注 1 链接[1]

脚注 2 链接[2]

行内的脚注[3] 定义。

重复的页脚定义[2:1]


  1. 脚注 可以包含特殊标记

    也可以由多个段落组成 ↩︎

  2. 脚注文字。 ↩︎ ↩︎

  3. 行内脚注文本 ↩︎