语法高亮与行号

Shirone 深度集成了 Expressive Code 引擎，提供基于 Shiki 的专业级静态语法着色与行号管理。

基础语法高亮#

在代码块三个反引号后指定编程语言标识符：

1
```typescript
2
interface UserProfile {
3
  name: string;
4
  avatar: string;
5
  themeColor: number;
6
}
7
```

渲染效果：

1
interface UserProfile {
2
  name: string;
3
  avatar: string;
4
  themeColor: number;
5
}

语言标识符决定着色规则，常见取值包括 ts、js、astro、svelte、bash、yaml、json、markdown、diff。不写标识符时按纯文本渲染。

显示行号（showLineNumbers）#

通过在元数据中添加 showLineNumbers 属性强制开启行号显示：

1
```rust showLineNumbers
2
fn main() {
3
    println!("Hello, Shirone!");
4
}
5
```

渲染效果：

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

行号标记在服务端生成，复制代码时不会把行号带进剪贴板。

与其它元数据组合#

代码围栏首行的元数据可以叠加书写，顺序不影响结果：

1
```typescript title="src/config.ts" showLineNumbers {2,5} collapse={7-9}
2
export const config = {
3
  themeColor: 315,
4
  analytics: false,
5
  comments: true,
6
  trailingSlash: 'always',
7

8
  // 以下是自动生成的默认区块
9
  base: '/',
10
  output: 'static',
11
  prefetch: true,
12
};
13
```

渲染效果：

1
export const config = {
2
  themeColor: 315,
3
  analytics: false,
4
  comments: true,
5
  trailingSlash: 'always',
6

3 collapsed lines
7
  // 以下是自动生成的默认区块
8
  base: '/',
9
  output: 'static',
10
  prefetch: true,
11
};

元数据	作用	详见
`title="..."`	代码块顶栏文件名	标题与文件名
`showLineNumbers`	显示行号	本文
`{2,5}`	高亮指定行	高亮与差异标记
`collapse={7-9}`	折叠行范围	代码折叠与复制

特性与优势#

零客户端运行时：所有语法高亮与行号标记在服务端完成静态预渲染，不会发生客户端样式闪烁。
自适应明暗配色：代码块根据当前站点的 M3E 配色调色板与暗色模式自动调整语法前景色与背景对比度。

二甲基

基础语法高亮#

显示行号（showLineNumbers）#

与其它元数据组合#

特性与优势#

Markdown 语法

继续阅读

换条路线

评论

二甲基

基础语法高亮#

显示行号（showLineNumbers）#

与其它元数据组合#

特性与优势#

分享文章

沿着主题读

换条路线

评论