页面高级内容测试

misc
@test

页面高级内容渲染效果的测试。

Update

  • 2024-08-31：加入了 Mermaid 图的支持！
  • 2024-02-18：更新了 GitHub 风格的 Callout！

扩展 Markdown 语法及样式系统

太长不想看

详情

:::::details[点击以展开] 
这里有些隐藏的内容。

可以有多段。

:::details[<strong>再点击！</strong>]
还可以嵌套。
:::
:::::
点击以展开

这里有些隐藏的内容。

可以有多段。

再点击！

还可以嵌套。

卡片、空块和行内元素

:::div{.card .text-back .bg-front}
这是一张卡片

圆角的。默认反色。有一些内容。
:::

:::div{.some-class}
而这是一个无聊的空 `<div>`。
:::

这是一张卡片

圆角的。默认反色。有一些内容。

而这是一个无聊的空 <div>。

:span[平平无奇。]{.some-class}

平平无奇。

UnoCSS

This is :span[red]{.text-red-500}, :span[light]{.font-light}, :span[Small-caps]{.small-caps}.
While this is :span[red and light and small-caps]{.text-red-500 .font-light .small-caps}.

This is :span[**bold and red**]{.text-red-500}. While this is :span[`monospace and red`]{.text-red-500}. 

This one is :a[a link forced to be red]{href="#详情" class="!text-red-500"}.

Custom values are :span[**fine**]{.px-1 class="bg-[#114514]" .text-white}.

This is red, light, Small-caps. While this is red and light and small-caps.

This is bold and red. While this is monospace and red.

This one is a link forced to be red.

Custom values are fine.

:::div{ .card .bg-one-back .text-front }
:h4[块也可以]{ class="!mb-0" }

有一些内容。
:::

块也可以

有一些内容。

Ruby

[夢](-ゆめ)に[僕](-ぼく)らで[帆](-ほ)を[張](-は)って　
[来](-きた)るべき[日](-ひ)のために[夜](-よる)を[越](-こ)え

夢ゆめに僕ぼくらで帆ほを張はって 来きたるべき日ひのために夜よるを越こえ

莱比锡标注法

<component is="leipzig-glossing">
  <p>Russian</p>
  <p align lang="ru">My s Marko poexa-l-i avtobus-om v Peredelkino. </p>
  <p align gloss>1PL COM Marko go-PST-PL bus-INS ALL Peredelkino</p>
  <p>'Marko and I went to Perdelkino by bus.'</p>
</component>

Russian

MysMarkopoexa-l-iavtobus-omvPeredelkino.1PLCOMMarkogo-PST-PLbus-INSALLPeredelkino

'Marko and I went to Perdelkino by bus.'

Callout

> [!WARNING]
> The following syntax is exclusive to Python 2.
> ```python
> print "Hello, world!"
> ```
Warning

The following syntax is exclusive to Python 2.

print "Hello, world!"

支持的 Callout 类型：

  • INFO / NOTE
  • TIP
  • WARNING
  • CAUTION
  • IMPORTANT
  • TLDR
  • TBC
  • UPDATE
所有类型
Info

This is an information message.

Tip

This is a tip message.

Warning

This is a warning message.

Caution

This is a caution message.

Important

This is an important message.

TL;DR

This is a TLDR message.

Incomplete

This is a comming-soon message.

Update

This is an update message.

Mermaid 图

```mermaid
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
```
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;

Mermaid 依赖在运行时从 CDN 动态加载。颜色根据当前主题色生成。改变暗色模式和主题色后需要刷新页面以重新取色。