452 字
2 分钟
代码块高亮与差异标记
三种标记都写在围栏首行:花括号里的行号 = 高亮,ins={...} = 新增(绿底),del={...} = 删除(红底)。
行高亮
效果(第 2 行与第 4–5 行被点亮)
function setup() { const isEnabled = true; // 第 2 行高亮 const count = 0; console.log("初始化完成"); // 第 4-5 行高亮 return count;}源码
```typescript {2,4-5} title="src/index.ts"function setup() { const isEnabled = true; // 第 2 行高亮 const count = 0; console.log("初始化完成"); // 第 4-5 行高亮 return count;}```行号范围的写法是 {1,3-5}:逗号分隔单个行号,连字符表示区间。
新增与删除标记
效果(被 del 标记的行变红、ins 标记的行变绿)
export const siteConfig = { themeColor: 210, // 旧配置 themeColor: 315, // 新配置};源码
```typescript ins={3} del={2} title="更新配置"export const siteConfig = { themeColor: 210, // 旧配置 themeColor: 315, // 新配置};```原生 diff 代码块
效果:语言写成 diff,行首用 + / -,得到纯文本 diff 的配色。
const oldVersion = "1.0.0";const newVersion = "2.0.0";源码
```diff title="git diff"- const oldVersion = "1.0.0";+ const newVersion = "2.0.0";```参数一览
| 写法 | 作用 | 视觉 |
|---|---|---|
{行号,范围} | 高亮指定行 | 强调底色 |
ins={...} | 标记新增行 | 绿色背景 |
del={...} | 标记删除行 | 红色背景 |
title="..." | 顶部标题栏 | 可与以上任意标记组合 |
语言 diff | 原生 diff 展示 | 按行首 +/- 着色 |
分享文章
生成精美分享图或复制链接,与更多人分享本文。
继续阅读
换条路线
从其他文章中稳定抽取
最后更新于 ,距今已过 301 天
部分内容可能已过时
评论