580 字

3 分钟

增强Fuwari的代码块功能

2025-09-17

前端

Astro

/

Fuwari

/

博客

统计加载中...

使用现在最新的🍥Fuwari博客已经引入了astro-expressive-code包，不需要额外安装了，直接使用就完事了

折叠与行数都已经配置好了，@expressive-code/plugin-collapsible-sections 与 @expressive-code/plugin-line-numbers 不用额外安装

使用格式方法#

标题#

1
console.log("Line 1");
2
console.log("Line 2");
3
let a = 1;
4
let b = 2;

高亮指定行#

1
console.log("Line 1");
2
console.log("Line 2");
3
let a = 1;
4
let b = 2;
5
let c = 3;
6
let d = 4;
7
let e = 5;
8
let f = 6;
9
let g = 7;
10
console.log(a + b);
11
let h = 4;
12
let i = 5;
13
let j = 6;
14
let k = 7;
15
let l = 7;

新增/删除指定行#

1
console.log("Line 1");
2
console.log("Line 2");
3
let a = 1;
4
let b = 2;
5
let c = 3;
6
let d = 4;
7
let e = 5;
8
let f = 6;
9
let g = 7;
10
console.log(a + b);
11
let h = 4;
12
let i = 5;
13
let j = 6;
14
let k = 7;
15
let l = 7;

高亮块#

1
```js  "a + b" del="let g = 7"
2
//{2,4-5}高亮 ins={3,7}新增 del={6}删除
3
console.log("Line 1");
4
console.log("Line 2");
5
let a = 1;
6
let b = 2;
7
let c = 3;
8
let d = 4;
9
let e = 5;
10
let f = 6;
11
let g = 7;
12
console.log(a + b);
13
let h = 4;
14
let i = 5;
15
let j = 6;
16
let k = 7;
17
let l = 7;

折叠代码/代码行数#

7
//collapse={8-13, 15-16} 折叠 startLineNumber=7
8
console.log("Line 1");
9
console.log("Line 2");
10
let a = 1;
11
let b = 2;
12
let c = 3;
13
let d = 4;
6 collapsed lines
14
let e = 5;
15
let f = 6;
16
let g = 7;
17
console.log(a + b);
18
let h = 4;
19
let i = 5;
20
let j = 6;
2 collapsed lines
21
let k = 7;
22
let l = 7;

代码块标识#

这是一个Expressive Code的插件，增加代码块的语言标识图标

1
# 使用 npm
2
npm install @xt0rted/expressive-code-file-icons --save
3

4
# 如果用 pnpm（从报错中的 .pnpm 来看可能是你的包管理器）
5
pnpm add @xt0rted/expressive-code-file-icons

这是博主的设置，修改样式后需删除项目里的📁.astro，并重启项目才能看到效果

1
import { pluginFileIcons } from "@xt0rted/expressive-code-file-icons";
2

3
export default defineConfig({
4
  // ...
5
  integrations: [
6
    // ...
7
    expressiveCode({
8
    themes: ["catppuccin-frappe", "light-plus"],
9
    plugins: [pluginCollapsibleSections(), pluginLineNumbers(),
10
      pluginFileIcons({
11
        iconClass: "text-4 w-5 inline mr-1 mb-1",
12
        titleClass: ""
13
      })
14
    ],
15
  }),
16
  ]
17
})

提醒
不过有些标识图标不适用双主题，比如 Astro 下面是博主的临时解决办法（针对Astro）

1
onMount(() => {
2
  mode = getStoredTheme();
3
    updateAstroSvg(mode);
4
  const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
5
  const changeThemeWhenSchemeChanged: Parameters<
6
    typeof darkModePreference.addEventListener<"change">
7
  >[1] = (_e) => {
8
    applyThemeToDocument(mode);
9
  };
10
  darkModePreference.addEventListener("change", changeThemeWhenSchemeChanged);
11
  return () => {
12
    darkModePreference.removeEventListener(
13
      "change",
14
      changeThemeWhenSchemeChanged,
15
    );
16
  };
17
});
18

19
function switchScheme(newMode: LIGHT_DARK_MODE) {
20
  mode = newMode;
21
  setTheme(newMode);
22
    updateAstroSvg(mode);
23
}
24
function updateAstroSvg(mode: LIGHT_DARK_MODE) {
25
  const spans = document.querySelectorAll('figcaption > .title')
26
  spans.forEach(span => {
27
    if (!span || !span.innerHTML.includes('astro')) return
28

29
    const paths = span.querySelectorAll('svg > path')
30
    if (mode === DARK_MODE){
31
      paths[1].setAttribute('fill', '#fff')
32
    }
33
    else{
34
      paths[1].setAttribute('fill', '#000')
35
    }
36
  })
37
}