452 字
2 分钟
页面浏览--访问次数--
代码块高亮与差异标记

三种标记都写在围栏首行:花括号里的行号 = 高亮,ins={...} = 新增(绿底),del={...} = 删除(红底)。

行高亮#

效果(第 2 行与第 4–5 行被点亮)

src/index.ts
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 的配色。

git 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 展示按行首 +/- 着色

第 21 篇,共 23 篇本文属于系列

代码块高亮与差异标记
https://www.klucen.cn/posts/博客搭建/codeblock-diff/
作者
KLucen
发布于
2025-12-14
许可协议
CC BY-NC-SA 4.0

分享文章

生成精美分享图或复制链接,与更多人分享本文。

继续阅读

沿着主题读

基于共同的标签与分类

换条路线

从其他文章中稳定抽取

评论

正在加载评论...

最后更新于 ,距今已过 301 天

部分内容可能已过时