Markdown 语法组件

链接 ProseA

这是内部链接。站外链接 默认在新标签页打开，并在鼠标悬浮时展示域名。

还会根据域名展示图标，例如 微软文档、GitHub、Bilibili、QQ 官网、微信公众号 等。

为更多站点匹配图标

你可以在 app/utils/icon.ts 分别为主域名或专门域名（优先级高）添加匹配规则来为更多站点匹配图标。

代码 ProseCode

行内代码 和 在超链接中的 行内代码。

还可以通过在反引号后加 {lang="js"} 等语言实现高亮，例如 const a = 1 。

代码块 ProsePre

纯文本代码块

带文件夹名、未指定语言的代码块

语言: yaml # 指定语言但无文件名

羽化边缘: 如果一行特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别长，溢出滚动时有羽化边缘。

# 更新日志
- 特殊文件名自动匹配图标
- 若行数超出
  `appConfig.component.codeblock.triggerRows`
  （默认32）
  - 则自动折叠到
  `appConfig.component.codeblock.collapsedRows`
  （默认16）
- 如果设置了 expand，则不会自动折叠
- 如果设置了 wrap，则会自动换行
- 如果设置了文件名，则会在代码块标题前展示图标
  - 图标只在有文件名时展示
  - 默认图标是语言图标
  - 特殊文件名也会自动识别出图标
  - 文件名可以是任意字符串，例如 `CHANGELOG.md`、`README.md` 等
  - 文件名也可以是路径，例如 `src/components/ProsePre.vue` 等
  - 还可以通过 `icon=图标` 自定义图标

代码行标记语法

在代码行末尾可以添加特殊注释来标记该行：

• # [!code ++] 标记为新增行，显示绿色背景和 + 号
• # [!code --] 标记为删除行，显示红色背景和 - 号
• # [!code highlight] 标记为高亮行，显示主题高亮颜色

示例：

function hello() {
  console.log('hello') # [!code ++]
  console.log('world') # [!code highlight]
  console.log('foo') # [!code --]
}

高亮

代码块通过 Shiki 进行高亮，可在 blog.config.ts 中配置语言（Markdown 中出现的所有语言）和代码高亮主题。

为更多语言匹配图标

你可以根据 app/utils/icon.ts 语言图标匹配流程为文件后缀、语言简写或别名添加匹配规则来为更多语言匹配图标：

1. 查找 file2icon 映射表，将文件名后缀替换为图标名。
2. 若无匹配，查找 ext2lang 映射表，将语言简写或别名转换为 Catppuccin 图标库中的语言名。
3. 将 Catppuccin 图标库中的语言名转换为 Iconify 图标名。

表格 ProseTable

支持表格横向滚动或自动换行的切换。

|| 表头滚动吸附 | 滚动时边缘羽化 | 如果标题或内容很 loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog | 这里还有一列，但是是空内容 | || ----------- | -------------: | :-------------------------------------------------------------------------------- | :------------------------- | || 已实现 | 已实现 | 可以切换滚动方式 |

数学公式

由 $\KaTeX$ 驱动，支持 $\TeX$ 和部分 $\LaTeX$ 语法。如果 Markdown 正文需要直接使用 $ 符号，需要使用 \$ 转义。

支持语法列表（中文版）

乐谱渲染播放

必要时可用豆包等 AI 将乐谱识别为 ABC 记法。只在网络状态良好时加载播放能力。

编辑器、Cheat Sheet 和语法检查：https://editor.drawthedots.com/