Welcome Tachibana General

GitHub 仓库卡片#

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

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

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

提示框#

支持以下类型的提示框：note tip important warning caution

NOTE

即使用户只是快速浏览，也应该注意这些重要信息。

TIP

帮助用户更高效完成操作的可选信息。

IMPORTANT

用户成功完成操作所必需的关键信息。

WARNING

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

CAUTION

执行某项操作可能带来的负面后果。

1
:::note
2
Highlights information that users should take into account, even when skimming.
3
:::
4

5
:::tip
6
Optional information to help a user be more successful.
7
:::

1
:::note[MY CUSTOM TITLE]
2
This is a note with a custom title.
3
:::

1
> [!NOTE]
2
> The GitHub syntax is also supported.
3

4
> [!TIP]
5
> The GitHub syntax is also supported.

1
The content :spoiler[is hidden **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="Build"
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] Known limitation
2
> Describe the known issue here.
3

4
:::danger[Danger directive]
5
This directive uses a custom title.
6
:::

Wiki 链接#

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

撰写博客文章

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

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

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

行内链接会保持行内形式。请参阅 Mermaid 示例，或直接链接到 某个章节。

1
[[markdown-mermaid]]
2

3
See [[markdown-mermaid|the Mermaid examples]].

Markdown 图片#

图片替代文本仍可供辅助技术使用。Markdown 标题会显示为可见图注，可选的经过验证的 w-N% 标记用于控制显示宽度：

1
![Descriptive alt w-60%](./image.webp "A visible image caption")

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

1
<div data-no-enhance>
2
  <img src="/images/demos/image-grid-demo/square-3.webp" alt="Custom image markup" width="640" height="360">
3
</div>

自动图片网格#

两个或更多相邻的独立图片会被组合成响应式图库。当需要自定义列数、宽高比或对象适配方式时，仍可使用显式的 :::grid 指令。

1
![First image](/images/first.webp)
2
![Second image](/images/second.webp)

PlantUML#

PlantUML 围栏会通过配置的服务器生成 SVG 图表。图表支持浅色和深色源代码、缩放、拖动、重置以及全屏查看。

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

化学#

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