代码显示配置

发布时间： 2025-05-10 03:30:00 更新时间： 2026-01-26 04:00:00

🕒 阅读时间：11 min read 📝 字数：4306 👀 阅读量： Loading...

代码显示配置

Stalux主题使用Expressive Code提供强大的代码显示功能，包括语法高亮、编辑器/终端框架和自动换行等功能。本文将介绍如何配置和使用这些功能。

语法高亮

Expressive Code使用与VS Code相同的Shiki引擎提供超过100种语言的准确语法高亮。

基本使用

在Markdown中使用代码块时，只需在开头的代码围栏中指定语言标识符即可获得语法高亮：

1
```js
2
console.log("这段代码会被语法高亮！");
3
```

1
console.log("这段代码会被语法高亮！");

支持的语言

默认情况下支持超过100种语言，包括JavaScript、TypeScript、HTML、CSS、Astro、Markdown等。

编辑器和终端框架

Expressive Code可以在代码块周围渲染框架，使其看起来像代码编辑器或终端窗口。

代码编辑器框架

要让代码块看起来像VS Code这样的编辑器窗口，您需要提供一个能在打开的文件标签中显示的文件名。

您可以在开头的代码围栏中设置title属性为文件名，或在代码的前几行添加文件名注释：

1
``js title="my-test-file.js"
2
console.log("使用title属性的示例");
3
```
4

5
```js title="my-test-file.js"
6
console.log("使用title属性的示例");
7
```

1
console.log("使用title属性的示例");

1
<div>使用文件名注释的示例</div>

1
```html
2
<div>使用文件名注释的示例</div>
3
```

终端框架

当遇到通常用于终端会话或shell脚本的语言标识符（如bash、sh、powershell等）的代码块时，Expressive Code会执行额外检查以确定要使用的框架类型：

1
```bash
2
echo "这个终端框架没有标题"
3
```
4

5
```powershell title="PowerShell 终端示例"
6
Write-Output "这个有标题！"
7
```

1
echo "这个终端框架没有标题"

1
Write-Output "这个有标题！"

覆盖框架类型

如果您想覆盖某些代码块的自动框架类型检测，可以在开头的代码围栏中添加frame="..."属性。

支持的值为code、terminal、none和auto。默认值为auto。

1
```sh frame="none"
2
echo "看，没有框架！"
3
```
4

5
```ps frame="code" title="PowerShell Profile.ps1"
6
# 如果不覆盖，这将是一个终端框架
7
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
8
New-Alias tail Watch-Tail
9
```

1
echo "看，没有框架！"

1
# 如果不覆盖，这将是一个终端框架
2
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
3
New-Alias tail Watch-Tail

自动换行

当代码块包含长行时，启用自动换行可以使代码保持在容器范围内，避免水平滚动。

为单个代码块配置自动换行

您可以使用代码块元信息中的wrap布尔属性为单个代码块启用或禁用自动换行：

1
```js wrap
2
// 启用自动换行的示例
3
function getLongString() {
4
  return "这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间,这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间,这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间,这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间,这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间";
5
}
6
```
7

8
```js wrap=false
9
// 禁用自动换行的示例
10
function getLongString() {
11
  return "这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间,这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间,这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间,这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间,这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间";
12
}
13
```

1
// 启用自动换行的示例
2
function getLongString() {
3
  return "这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间,这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间,这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间,这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间,这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间";
4
}

1
// 禁用自动换行的示例
2
function getLongString() {
3
  return "这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间,这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间,这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间,这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间,这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间";
4
}

配置换行行的缩进

缩进保留

默认情况下，长行的换行部分将与其行的缩进级别对齐，使换行代码显示在同一列。这增加了换行代码的可读性，对缩进有重要意义的语言（如Python）尤其有用。

您可以使用代码块元信息中的preserveIndent布尔属性禁用默认行为：

1
// 使用preserveIndent的示例（默认启用）
2
function getLongString() {
3
  return "这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间";
4
}

1
```js wrap preserveIndent
2
// 使用preserveIndent的示例（默认启用）
3
function getLongString() {
4
  return "这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间";
5
}
6
```

1
// 使用preserveIndent=false的示例
2
function getLongString() {
3
  return "这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间";
4
}

1
```js wrap preserveIndent=false
2
// 使用preserveIndent=false的示例
3
function getLongString() {
4
  return "这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间";
5
}
6
```

悬挂缩进

您还可以定义换行行应缩进的列数：

1
// 使用hangingIndent=2的示例
2
function getLongString() {
3
  return "这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间";
4
}
5
function heavilyIndentedCode() {
6
  return "这个长行已经以大量缩进开始，由于hangingIndent=2，其换行部分将再缩进2列";
7
}

1
```js wrap hangingIndent=2
2
// 使用hangingIndent=2的示例
3
function getLongString() {
4
  return "这是一个非常长的字符串，如果容器宽度不是特别大，它很可能无法适应可用空间";
5
}
6
function heavilyIndentedCode() {
7
  return "这个长行已经以大量缩进开始，由于hangingIndent=2，其换行部分将再缩进2列";
8
}
9
```

全局配置

您可以在astro.config.mjs中配置Expressive Code的默认设置：

1
import { defineConfig } from "astro/config";
2
import astroExpressiveCode from "astro-expressive-code";
3

4
export default defineConfig({
5
  integrations: [
6
    astroExpressiveCode({
7
      // 配置语法高亮
8
      themes: ["dracula", "solarized-light"],
9
      shiki: {
10
        // 可以在这里传递其他插件选项
11
      },
12

13
      // 配置框架
14
      frames: {
15
        // 示例：隐藏"复制到剪贴板"按钮
16
        showCopyToClipboardButton: false,
17
      },
18

19
      // 配置默认属性
20
      defaultProps: {
21
        // 默认启用自动换行
22
        wrap: true,
23
        // 为终端语言禁用换行行缩进
24
        overridesByLang: {
25
          "bash,ps,sh": { preserveIndent: false },
26
        },
27
      },
28

29
      // 覆盖默认样式
30
      styleOverrides: {
31
        frames: {
32
          shadowColor: "#124",
33
        },
34
      },
35
    }),
36
  ],
37
});

更多配置选项和高级功能，请参考Expressive Code官方文档。