Expressive Code 入门：代码块高亮的终极方案
技术博客的代码块就是门面：语法高亮准不准、行号有没有、能不能折叠——Expressive Code 把这些全部做成了插件。
它是什么
Expressive Code 是 Astro 官方推荐的代码块渲染引擎（也是独立可用的库），基于 Shiki 高亮器。相比 Astro 内置的默认代码块，它提供三个杀手锏：行号、可折叠代码区、帧标题，全部通过代码块 fenced语法里的 meta 信息驱动，Markdown 里零侵入。
pnpm add astro-expressive-code @expressive-code/core \
@expressive-code/plugin-line-numbers \
@expressive-code/plugin-collapsible-sections
// astro.config.mjs
import expressiveCode from 'astro-expressive-code';
export default defineConfig({
integrations: [
expressiveCode({
themes: ['github-dark', 'github-light'], // 多主题自动跟随站点深浅色
plugins: ['line-numbers', 'collapsible-sections'],
}),
],
});
三个核心能力
1. 帧标题与语言标签。代码块第一行写 meta：
```ts title="src/utils/date.ts" showLineNumbers
export function format(d: Date): string {
return d.toISOString();
}
```
渲染出一个带标题栏（src/utils/date.ts）、有语言徽标、有行号的代码框——复制按钮也是自动的。技术文章里引用具体文件路径时，这个标题栏信息量巨大。
2. 行高亮与差异标记。meta 里标记重点行：
```js ins={2} del={3} mark={5-7}
const a = 1; // 普通行
const b = 2; // 绿底：新增
const c = 3; // 红底：删除
// ...
```
mark 高亮重点行、ins/del 表达增删——讲 diff、讲重构前后对比时是表达力质变。
3. 折叠区。长代码默认折叠中段，读者点开看全文：
```ts collapse={3-40} title="完整配置（点击展开）"
const config = {
// 第 1、2 行可见
// ...中间 38 行默认折叠
// 最后 2 行可见
};
```
教程类文章贴长配置文件（如 vite.config.ts、docker-compose.yml）时必备——读者扫一眼开头结尾，需要细节再展开，页面不再被百行代码撑得老长。
主题系统
双主题配置后，Expressive Code 输出的 CSS 变量跟随站点的深浅色模式自动切换，代码块颜色和站点主题始终一致，不需要 JS 参与：
expressiveCode({
themes: ['one-dark-pro', 'one-light'],
// 默认以第一个为暗色、第二个为亮色，跟随 CSS 变量切换
})
与普通 Markdown 代码块的关系
接入后不需要改任何旧文章——普通三反引号代码块自动升级为 Expressive Code 渲染（语法高亮质量随 Shiki，覆盖 200+ 语言）。meta 是可选增强，有则渲染高级特性，无则正常高亮。这是它作为「渲染引擎替换」的优雅之处：渐进增强，向后兼容。
实际效果对比
默认 Shiki/Prism 高亮 vs Expressive Code 的差异体感：
| 能力 | 默认代码块 | Expressive Code |
|---|---|---|
| 语法高亮 | ✅ | ✅（同 Shiki 内核） |
| 行号 | ❌ | ✅ 可选 |
| 标题栏/文件名 | ❌ | ✅ |
| 行级标记 | ❌ | ✅ mark/ins/del |
| 折叠长代码 | ❌ | ✅ |
| 复制按钮 | 看主题 | ✅ 内置 |
| 多主题跟随 | 手动 | ✅ 原生 |
小结
Expressive Code 的定位是「技术内容站代码块的全功能渲染层」：高亮内核用 Shiki（业界最好），在此之上补齐行号、行标记、折叠、标题栏这些内容表达特性，且全部通过 Markdown meta 驱动、零侵入向后兼容。本站接入它后，技术文章里讲源码、贴配置、做对比的表达力明显上了一个台阶。