わたしの部屋

GitHub 仓库卡片#

你可以添加动态卡片链接到 GitHub 仓库。页面加载时，仓库信息将通过 GitHub API 获取。

使用代码 ::github{repo="LyraVoid/Mizuki"} 创建 GitHub 仓库卡片。

1
::github{repo="LyraVoid/Mizuki"}

标注 (Admonitions)#

支持以下类型的标注：note tip important warning caution

NOTE

突出显示用户即使在略读时也应注意的信息。

TIP

帮助用户更成功的可选信息。

IMPORTANT

用户成功所需的关键信息。

WARNING

由于潜在风险，需要用户立即关注的关键内容。

CAUTION

操作可能产生的负面后果。

1
:::note
2
突出显示用户即使在略读时也应注意的信息。
3
:::
4

5
:::tip
6
帮助用户更成功的可选信息。
7
:::

1
:::note[我的自定义标题]
2
这是一个带有自定义标题的注释。
3
:::

1
> [!NOTE]
2
> GitHub 语法也受支持。
3

4
> [!TIP]
5
> GitHub 语法也受支持。

1
内容 :spoiler[是隐藏的 **ayyy**]！

代码组#

使用 VitePress 风格的 ::: code-group labels=[...] 语法，将相关示例以易于访问的标签页形式呈现。标签页支持鼠标输入以及 Left（左）、Right（右）、Home 和 End 键。

1
export const config = {
2
  framework: "Mizuki",
3
  enhanced: true,
4
};

1
pnpm check && pnpm build

3 collapsed lines
1
import { one } from "one";
2
import { two } from "two";
3
import { three } from "three";
4
console.log(one, two, three);

1
::: code-group labels=[TypeScript, Shell]
2

3
```ts title="config.ts"
4
export const framework = "Mizuki";
5
```
6

7
```bash title="构建"
8
pnpm build
9
```
10

11
:::

1
01
2
02
3
03
4
04
5
05
6
06
7
07
8
08
9
09
10
10
11
11
12
12
13
13
14
14
15
15
16
16
17
17
18
18
19
19
20
20
21
21
22
22

扩展标注#

除了 GitHub 的五种提醒类型外，Mizuki 还接受常见的 Obsidian 别名，例如 INFO、TODO、SUCCESS、QUESTION、DANGER、BUG、EXAMPLE 和 QUOTE。

已知限制

扩展别名已映射到 Mizuki 的语义标注样式。

同时也支持 Python Markdown 和 Docusaurus 风格的指令：

危险指令

此指令使用了自定义标题。

1
> [!BUG] 已知限制
2
> 在此处描述已知问题。
3

4
:::danger[危险指令]
5
此指令使用了自定义标题。
6
:::

Wiki 链接#

Obsidian 风格的 Wiki 链接可以解析文章路径、别名和标题锚点。独立的链接会成为文章卡片：

撰写博客文章

文章结构和 frontmatter 的通用示例。

2024-04-01指南#示例#写作#Markdown

卡片会复用目标文章的封面。相对封面会从目标文章中解析，同时也支持公共、远程和配置的 image: api 封面。加密文章不会在预览中显示其封面。

内联链接保持内联。参见 Mermaid 示例，或直接链接到 某个章节。

1
[[markdown-mermaid]]
2

3
参见 [[markdown-mermaid|Mermaid 示例]]。

Markdown 图像#

图像 alt 文本仍可供辅助技术使用。Markdown 标题将作为可见的标题显示，可选的已验证 w-N% 标记可控制显示宽度：

1
![描述性 alt w-60%](./image.webp "可见的图像标题")

仅接受从 w-1% 到 w-100% 的宽度。imageOptimization.noReferrerDomains 中的远程图像主机在初始 HTML 中会收到 referrerpolicy="no-referrer"。当自定义标记应保持不变时，请在原始 HTML 图像或其父级元素上添加 data-no-enhance。

1
<div data-no-enhance>
2
  <img src="/images/demos/image-grid-demo/square-3.webp" alt="自定义图像标记" width="640" height="360">
3
</div>

自动图像网格#

两个或多个相邻的独立图像会被归入一个响应式图库中。当需要自定义列、纵横比或对象填充时，显式的 :::grid 指令仍然可用。

1
![第一张图片](/images/first.webp)
2
![第二张图片](/images/second.webp)

PlantUML#

PlantUML 代码块通过配置的服务器生成 SVG 图表。图表支持亮色和暗色主题，以及缩放、拖拽、重置和全屏查看。

1
```plantuml
2
@startuml
3
Alice -> Bob: Hello
4
@enduml
5
```

化学#

KaTeX 的 mhchem 扩展可渲染化学方程式：