Markdown 扩展功能 - Shirone × Znfooe

GitHub 仓库卡片#

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

使用代码 ::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]

提示框（Admonitions）#

支持以下类型的提示框：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
:::

GitHub 语法#

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

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

剧透内容#

你可以为文本添加剧透遮挡。文本同样支持 Markdown 语法。

这句话的内容！

1
The content :spoiler[is hidden **ayyy**]!

图片宽度与标题#

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

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

有效宽度范围为 w-1% 到 w-100%；无效的标记会保留在 alt 文本中。宽度与说明彼此独立——仅提供 title 也可以生成说明文字：

欢迎

Shirone × Znfooe

GitHub 仓库卡片#

Mermaid 图表#

提示框（Admonitions）#

基本语法#

自定义标题#

GitHub 语法#

剧透内容#

图片宽度与标题#

继续阅读

换条路线

Shirone × Znfooe

GitHub 仓库卡片#

Mermaid 图表#

提示框（Admonitions）#

基本语法#

自定义标题#

GitHub 语法#

剧透内容#

图片宽度与标题#

分享文章

沿着主题读

换条路线