427 字
2 分钟
页面浏览--访问次数--
代码块语法高亮与行号

代码块由 Expressive Code 在构建期完成高亮与标记,客户端只负责复制、折叠等交互。

按语言高亮#

效果:围栏后面写语言标识符即可。

interface UserProfile {
name: string;
avatar: string;
themeColor: number;
}

源码

```typescript
interface UserProfile {
name: string;
avatar: string;
themeColor: number;
}
```

换一种语言:

fn main() {
println!("Hello, Shirone!");
}
Terminal window
pnpm install
pnpm dev

显示行号#

效果:在语言名后面加上无值开关 showLineNumbers。

fn main() {
println!("Hello, Shirone!");
}

源码

```rust showLineNumbers
fn main() {
println!("Hello, Shirone!");
}
```

行号也可以从别的数字起算:

export const siteConfig = {
title: "KLucen 的启事录",
};

源码

```typescript showLineNumbers startLineNumber=10
export const siteConfig = {
title: "KLucen 的启事录",
};
```

相关参数#

参数取值默认说明
语言标识符typescript、rust、bash、json…无决定着色规则
showLineNumbers无值开关关强制显示行号
startLineNumber整数1行号起始值
wraptrue / false主题配置(本站为 true)超长行是否折行
preserveIndenttrue / falsetrue是否保留原始缩进

特点#

  • 零客户端运行时:高亮与行号在服务端静态预渲染,不会出现样式闪烁;
  • 自适应明暗配色:语法前景色与背景对比度依据 Material 3 调色板与暗色模式自动调整。

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

代码块语法高亮与行号
https://www.klucen.cn/posts/博客搭建/codeblock-highlight/
作者
KLucen
发布于
2025-12-14
许可协议
CC BY-NC-SA 4.0

分享文章

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

继续阅读

沿着主题读

基于共同的标签与分类

换条路线

从其他文章中稳定抽取

评论

正在加载评论...

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

部分内容可能已过时