427 字
2 分钟
代码块语法高亮与行号
代码块由 Expressive Code 在构建期完成高亮与标记,客户端只负责复制、折叠等交互。
按语言高亮
效果:围栏后面写语言标识符即可。
interface UserProfile { name: string; avatar: string; themeColor: number;}源码
```typescriptinterface UserProfile { name: string; avatar: string; themeColor: number;}```换一种语言:
fn main() { println!("Hello, Shirone!");}pnpm installpnpm dev显示行号
效果:在语言名后面加上无值开关 showLineNumbers。
fn main() { println!("Hello, Shirone!");}源码
```rust showLineNumbersfn main() { println!("Hello, Shirone!");}```行号也可以从别的数字起算:
export const siteConfig = { title: "KLucen 的启事录",};源码
```typescript showLineNumbers startLineNumber=10export const siteConfig = { title: "KLucen 的启事录",};```相关参数
| 参数 | 取值 | 默认 | 说明 |
|---|---|---|---|
| 语言标识符 | typescript、rust、bash、json… | 无 | 决定着色规则 |
showLineNumbers | 无值开关 | 关 | 强制显示行号 |
startLineNumber | 整数 | 1 | 行号起始值 |
wrap | true / false | 主题配置(本站为 true) | 超长行是否折行 |
preserveIndent | true / false | true | 是否保留原始缩进 |
特点
- 零客户端运行时:高亮与行号在服务端静态预渲染,不会出现样式闪烁;
- 自适应明暗配色:语法前景色与背景对比度依据 Material 3 调色板与暗色模式自动调整。
分享文章
生成精美分享图或复制链接,与更多人分享本文。
继续阅读
换条路线
从其他文章中稳定抽取
最后更新于 ,距今已过 301 天
部分内容可能已过时
评论