高亮与差异标记

Shirone 支持对代码块中的特定行进行行高亮、新增行（insert）与删除行（delete）的视觉差异标记。

行高亮（行号范围）#

在代码围栏首行通过 {1,3-5} 指定需要高亮的行号：

1
```typescript {2,4-5} title="src/index.ts"
2
function setup() {
3
  const isEnabled = true; // 第 2 行高亮
4
  const count = 0;
5
  console.log("初始化完成"); // 第 4-5 行高亮
6
  return count;
7
}
8
```

渲染效果：

1
function setup() {
2
  const isEnabled = true; // 第 2 行高亮
3
  const count = 0;
4
  console.log("初始化完成"); // 第 4-5 行高亮
5
  return count;
6
}

行号表达式支持逗号分隔的离散行（{2,7}）与连字符区间（{4-8}），两者可以混写。

差异标记（ins / del）#

使用 ins={...} 标记新增行（绿色背景），del={...} 标记删除行（红色背景）：

1
```typescript ins={3} del={2} title="更新配置"
2
export const siteConfig = {
3
  themeColor: 210, // 旧配置
4
  themeColor: 315, // 新配置
5
};
6
```

渲染效果：

1
export const siteConfig = {
2
  themeColor: 210, // 旧配置
3
  themeColor: 315, // 新配置
4
};

两个属性也可以同时传入多行，并与行高亮叠加使用：

1
```ts ins={4-5} del={1} {4} title="src/site.ts"
2
const themeColor = 210;
3
export const siteConfig = {
4
  base: '/',
5
  themeColor: 315,
6
  trailingSlash: 'always',
7
};
8
```

渲染效果：

1
const themeColor = 210;
2
export const siteConfig = {
3
  base: '/',
4
  themeColor: 315,
5
  trailingSlash: 'always',
6
};

原生 Diff 代码块#

也可以直接使用 diff 语言标识并以 + 和 - 作为行首字符：

1
```diff title="git diff"
2
- const oldVersion = "1.0.0";
3
+ const newVersion = "2.0.0";
4
```

渲染效果：

1
const oldVersion = "1.0.0";
2
const newVersion = "2.0.0";

Diff 代码块完整保留标准 diff 语义，@@ 段落头、上下文行与 +/- 行都会被正确着色。

标记方式对照#

写法	视觉结果	适用场景
`{2,4-5}`	中性行高亮背景	强调阅读重点
`ins={3}`	新增行配色	展示新增代码
`del={2}`	删除行配色	展示被移除的代码
```diff	完整 diff 着色	展示 `git diff` 原始输出

二甲基

行高亮（行号范围）#

差异标记（ins / del）#

原生 Diff 代码块#

标记方式对照#

Markdown 语法

继续阅读

换条路线

评论

二甲基

行高亮（行号范围）#

差异标记（ins / del）#

原生 Diff 代码块#

标记方式对照#

分享文章

沿着主题读

换条路线

评论