わたしの部屋

GitHub Repository Cards#

You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.

Create a GitHub repository card with the code ::github{repo="LyraVoid/Mizuki"}.

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

Admonitions#

Following types of admonitions are supported: note tip important warning caution

NOTE

Highlights information that users should take into account, even when skimming.

TIP

Optional information to help a user be more successful.

IMPORTANT

Crucial information necessary for users to succeed.

WARNING

Critical content demanding immediate user attention due to potential risks.

CAUTION

Negative potential consequences of an action.

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**]!

Code Groups#

Use VitePress-style ::: code-group labels=[...] syntax to present related examples as accessible tabs. Tabs support mouse input and the Left, Right, Home, and End keys.

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

Extended Callouts#

In addition to GitHub’s five alert types, Mizuki accepts common Obsidian aliases such as INFO, TODO, SUCCESS, QUESTION, DANGER, BUG, EXAMPLE, and QUOTE.

Known limitation

Extended aliases are mapped to Mizuki’s semantic callout styles.

Python Markdown and Docusaurus-style directives are supported as well:

Danger directive

This directive uses a custom title.

1
> [!BUG] Known limitation
2
> Describe the known issue here.
3

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

Wiki Links#

Obsidian-style Wiki Links resolve article paths, aliases, and heading anchors. A standalone link becomes an article card:

Inline links stay inline. See the Mermaid examples, or link directly to a section.

1
[[markdown-mermaid]]
2

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

Automatic Image Grids#

Two or more adjacent standalone images are grouped into a responsive gallery. Explicit :::grid directives remain available when custom columns, aspect ratio, or object fitting are required.

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

PlantUML#

PlantUML fences generate SVG diagrams through the configured server. Diagrams support light and dark sources, zooming, dragging, resetting, and fullscreen viewing.

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

Chemistry#

The KaTeX mhchem extension renders chemical equations: