Shirone

GitHub 仓库卡片#

你可以添加链接到 GitHub 仓库的动态卡片。页面加载时，仓库信息会自动通过 GitHub API 进行拉取并渲染。

Fabrizz/MMM-OnSpotify

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

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

Mermaid 图表#

代码块语言标记为 mermaid 的内容会被自动渲染为图表，并跟随当前激活的主题配色。

flowchart LR
    accTitle: Markdown 渲染管道
    accDescr: Markdown 源码转换为语义化 HTML 并进一步增强为主题化 SVG 图表。
    A[Markdown 源码] --> B[Astro 内容管道]
    B --> C[语义化 HTML]
    C --> D[主题化图表]

提示块#

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

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

5
:::tip
6
提供有助于提升阅读或操作效率的可选辅助信息。
7
:::

1
:::note[自定义标题示例]
2
这是一个带有自定义标题的提示块。
3
:::

1
> [!NOTE]
2
> 同时也完整支持 GitHub Alert 语法。
3

4
> [!TIP]
5
> 同时也完整支持 GitHub Alert 语法。

1
这里的内容 :spoiler[已经被完全隐藏了 **悄悄话**]！

图片宽度与图注#

单张独立图片支持在替代文本中添加可选的 w-N% 宽度标记，并在图片标题中添加居中图注：

1
![图片描述 w-50%](./image.webp "可见图注")

有效的宽度范围为 w-1% 到 w-100%；非法标记会保留在替代文本中。宽度与图注相互独立，仅提供标题时也会生成居中图注：