Markdown 扩展功能
Markdown 扩展功能
本文介绍 Firefly 的 Markdown 扩展功能，包括：通过 `::github{repo="..."}` 添加动态 GitHub 仓库卡片；基于 rehype-callouts 插件配置提醒框，支持 GitHub、Obsidian、VitePress、Docusaurus 四种主题，并分别给出语法示例，修改配置后需重启开发服务器；使用 `:spoiler[...]` 为文本添加剧透；以及用 `[grid]` 标签将多张图片按响应式网格并排展示，自动裁剪补齐高度并对齐图注。适用于使用 Firefly 编写博客或文档时查阅扩展语法与配置方式。
由 DeepSeek 生成 · 本文章版本使用已保存摘要
GitHub 仓库卡片
您可以添加链接到 GitHub 仓库的动态卡片，在页面加载时，仓库信息会从 GitHub API 获取。
使用代码 ::github{repo="CuteLeaf/Firefly"} 创建 GitHub 仓库卡片。
::github{repo="CuteLeaf/Firefly"}提醒框(Admonitions)配置
Firefly 采用了 rehype-callouts 插件，支持了四种风格的提醒框主题：GitHub、Obsidian、VitePress 和 Docusaurus。您可以在 src/config/siteConfig.ts 中进行配置：
export const siteConfig: SiteConfig = { // ... rehypeCallouts: { // 选项: "github" | "obsidian" | "vitepress" | "docusaurus" theme: "github", }, // ...};注意：更改配置后需要重启开发服务器才能生效。
以下是各个主题支持的类型列表，每个主题风格和语法不同，可根据喜好选择。
1. GitHub 主题风格
这是 GitHub 官方支持的 5 种基本类型。
基本语法
> [!NOTE] NOTE> 突出显示用户应该考虑的信息。
> [!TIP] TIP> 可选信息，帮助用户更成功。
> [!IMPORTANT] IMPORTANT> 用户成功所必需的关键信息。
> [!WARNING] WARNING> 关键内容，需要立即注意。
> [!CAUTION] CAUTION> 行动的负面潜在后果。
> [!NOTE] 自定义标题> 这是一个带有自定义标题的示例。2. Obsidian 主题风格
Obsidian 风格支持非常丰富的类型和别名。
点击展开 Obsidian 语法列表
> [!NOTE] NOTE> 通用的笔记块。
> [!ABSTRACT] ABSTRACT> 文章的摘要。
> [!SUMMARY] SUMMARY> 文章的总结（同 Abstract）。
> [!TLDR] TLDR> 太长不看（同 Abstract）。
> [!INFO] INFO> 提供额外信息。
> [!TODO] TODO> 需要完成的事项。
> [!TIP] TIP> 实用技巧或提示。
> [!HINT] HINT> 暗示（同 Tip）。
> [!IMPORTANT] IMPORTANT> 重要信息（Obsidian 风格通常使用类似的图标）。
> [!SUCCESS] SUCCESS> 操作成功。
> [!CHECK] CHECK> 检查通过（同 Success）。
> [!DONE] DONE> 已完成（同 Success）。
> [!QUESTION] QUESTION> 提出问题。
> [!HELP] HELP> 寻求帮助（同 Question）。
> [!FAQ] FAQ> 常见问题（同 Question）。
> [!WARNING] WARNING> 警告信息。
> [!CAUTION] CAUTION> 注意事项（同 Warning）。
> [!ATTENTION] ATTENTION> 引起注意（同 Warning）。
> [!FAILURE] FAILURE> 操作失败。
> [!FAIL] FAIL> 失败（同 Failure）。
> [!MISSING] MISSING> 缺失内容（同 Failure）。
> [!DANGER] DANGER> 危险操作警告。
> [!ERROR] ERROR> 错误信息（同 Danger）。
> [!BUG] BUG> 报告软件缺陷。
> [!EXAMPLE] EXAMPLE> 展示一个例子。
> [!QUOTE] QUOTE> 引用一段话。
> [!CITE] CITE> 引证（同 Quote）。
> [!NOTE] 自定义标题> 这是一个带有自定义标题的示例。
3. VitePress 主题风格
VitePress 风格提供了一套现代化的、扁平的默认样式。目前仅包含与 GitHub 一致的 5 种 基础类型。
点击展开 VitePress 语法列表
> [!NOTE] NOTE> 对应 GitHub 的 Note。
> [!TIP] TIP> 对应 GitHub 的 Tip。
> [!IMPORTANT] IMPORTANT> 对应 GitHub 的 Important。
> [!WARNING] WARNING> 对应 GitHub 的 Warning。
> [!CAUTION] CAUTION> 对应 GitHub 的 Caution。
> [!TIP] 自定义标题> VitePress 风格同样支持自定义标题。
4. Docusaurus 主题风格
Docusaurus 风格提供了一套现代化的提醒框样式，支持 5 种类型。
点击展开 Docusaurus 语法列表
支持以下类型的提醒框：note tip info warning danger
:::note突出显示用户应该考虑的信息，即使在快速浏览时也是如此。:::
:::tip可选信息，帮助用户更成功。:::
:::info一般信息。:::
:::warning由于潜在风险需要用户立即注意的关键内容。:::
:::danger行动的负面潜在后果。:::
:::tip[自定义标题]可选信息，帮助用户更成功。:::
剧透
您可以为文本添加剧透。文本也支持 Markdown 语法。
内容
内容 :spoiler[被隐藏了 **哈哈**]！图片画廊网格 (Image Grid)
您可以使用 [grid] 和 [/grid] 标签将多张图片纵向并排展示。这对于展示照片画廊或对比图非常有用。系统会自动根据包裹在其中的图片数量（最多支持并排展示4张）以响应式网格进行布局。
自动补齐图片高度： 同一排中如果有高度、大小或者比例不一的图片，会像「九宫格画廊相册」一样自动撑满。较短或不协调的图片会自动使用 object-cover 进行完美中心裁剪补充视野。图片边框水平彻底对齐无缝隙，但被裁剪后，只有点击图片通过灯箱才能查看完整图片，所以建议尽量避免使用长宽比例不一致的图片在同一排中。
图注恒定底端对齐： 不论上面的图片长宽如何变化，在同一行的所有图像解释文字（图注）都会对标到一条完美的水平基线上了。
基本语法
[grid][/grid]
评论区
评论加载中…