Markdown 扩展功能

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]

提示块#

支持以下类型的提示块：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**]!

图片宽度与题注#

独立图片可以在替代文本中接受可选的 w-N% 宽度标记，其 Markdown 标题会渲染为图片下方居中显示的题注：

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

有效宽度范围为 w-1% 到 w-100%；无效标记会保留在替代文本中。宽度与题注相互独立——只提供标题同样会生成题注：

Shirone

GitHub 仓库卡片#

Mermaid 图表#

提示块#

基本语法#

自定义标题#

GitHub 语法#

剧透#

图片宽度与题注#

继续阅读

换条路线

Shirone

GitHub 仓库卡片#

Mermaid 图表#

提示块#

基本语法#

自定义标题#

GitHub 语法#

剧透#

图片宽度与题注#

分享文章

沿着主题读

换条路线