Shirone

GitHub 仓库卡片#

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

Fabrizz/MMM-OnSpotify

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

1
::github{repo="saicaca/fuwari"}

Mermaid 图表#

围栏 mermaid 代码块会渲染为图表，并跟随当前配色方案。

flowchart LR
    accTitle: Markdown rendering pipeline
    accDescr: Markdown source is transformed into semantic HTML and then enhanced as a themed SVG diagram.
    A[Markdown source] --> B[Astro content pipeline]
    B --> C[Semantic HTML]
    C --> D[Themed diagram]

提示块#

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

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

5
:::tip
6
提供可选信息，帮助用户更顺利地使用。
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**]!

图片宽度与标题#

独立图片可以在其替代文本中接受可选的 w-N% 宽度标记，并将 Markdown 标题渲染为图片下方居中的说明文字：

1
![Image description w-50%](./image.webp "Visible caption")

有效宽度范围从 w-1% 到 w-100%；无效标记会保留在替代文本中。宽度和说明文字是独立的——仅提供标题也会生成说明文字：