Skip to main content

添加代码示例

你可以添加行内代码片段或代码块。代码块支持用于语法高亮、标题、行高亮、图标等的元选项。

行内代码

要将某个单词短语标记为代码,请用反引号(`)将其包裹。

代码块

使用围栏代码块,将代码用三个反引号包裹起来。代码块可直接复制;如果启用了文档助手,用户还可以让 AI 解释代码。 为语法高亮和启用元选项指定编程语言。在语言名后添加任意元选项,例如标题或图标。
HelloWorld.java 行数图标

代码块选项

你可以为代码块添加元选项,以自定义其外观。
在添加任何其他元选项之前,必须先为代码块指定编程语言。

选项语法

  • 字符串和布尔选项:使用 ""'',或不加引号包裹。
  • 表达式选项:使用 {}"",或 '' 包裹。

语法高亮

在代码块的起始反引号后指定编程语言即可启用语法高亮。 我们使用 Shiki 进行语法高亮,并支持所有可用语言。请在 Shiki 文档中查看完整的语言列表。

标题

为代码示例添加标题。可使用 title="Your title",或在单独一行放置字符串。
代码块示例

图标

使用 icon 属性为代码块添加图标。查看 Icons 以了解所有可用选项。

行高亮

在代码块中使用 highlight 并指定行号或范围,以高亮特定行。
行高亮示例

行聚焦

在代码块中使用 focus 并指定行号或范围,以高亮显示特定行。
行聚焦示例

显示行号

使用 lines 在代码块左侧显示行号。
显示行号 示例行

可展开

使用 expandable 让用户展开或收起长代码块。
可展开示例

Wrap

使用 wrap 为长文本启用自动换行。这样可避免水平滚动,并使长行更易读。
换行 示例

差异对比

在代码块中以可视化方式展示新增或删除的行。新增行以绿色高亮,删除行以红色高亮。 要创建差异对比,请在代码块的行尾添加以下特殊注释:
  • // [!code ++]: 将该行标记为新增(绿色高亮)。
  • // [!code --]: 将该行标记为删除(红色高亮)。
对于多行连续的情况,可在冒号后指定行数:
  • // [!code ++:3]: 将当前行及其后两行标记为新增。
  • // [!code --:5]: 将当前行及其后四行标记为删除。
注释语法必须与所用编程语言匹配(例如,JavaScript 使用 //,Python 使用 #)。
差异示例