🤖AI 摘要

本文介绍如何为 Fuwari 博客引入 astro-expressive-code，实现更美观、强大的代码块展示效果，包括代码高亮、行号显示、折叠功能、主题切换等，提升阅读体验和代码可读性。

此内容根据文章生成，不代表个人观点，仅用于文章内容的解释与总结

一、注释原代码块样式#

1
---
2
import "@fontsource-variable/jetbrains-mono";
3
import "@fontsource-variable/jetbrains-mono/wght-italic.css";
4
import path from 'node:path'
5
import { getImage } from 'astro:assets'
6
import { parseHTML } from 'linkedom'
7
interface Props {
8
  class: string;
9
    basePath?: string
10
}
11
const { class: className, basePath = '/' } = Astro.props
12
/*
13
*通常，“src”目录下的相对路径由Astro处理。
14
*然而，插件无法处理的路径可能会出现在这里，并且需要单独处理。
15
 */
16
const html = await Astro.slots.render('default')
17
const { document } = parseHTML(html)
18
await (async () => {
19
    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
20
    const modules: Record<string, any> = import.meta.glob(
21
        '../../**/*.{jpeg,jpg,png,tiff,webp,gif,svg,avif}',
22
    )
23
    const re = /^(?![a-zA-Z]+:\/|\/)/
24
    for (const img of document.querySelectorAll('img')) {
25
        const src = img.getAttribute('src')
26
        if (!src || !re.test(src)) continue
27
        const normalizedPath = path
28
            .normalize(path.join('../../', basePath, src))
29
            .replaceAll('\\', '/')
30
        const moduleLoader = modules[normalizedPath]
31
        if (!moduleLoader) continue
32
        try {
33
            const module = await moduleLoader()
34
            const result = await getImage({ src: module.default })
35
            img.setAttribute('src', result.src)
36
        } catch (error) {
37
            console.warn(
38
                `Skipping image "${normalizedPath}" due to processing error:`,
39
                error,
40
            )
41
        }
42
    }
43
})()
44
---
45
<div data-pagefind-body class={`prose dark:prose-invert prose-base !max-w-none custom-md ${className}`}>
46
    <!--<div class="prose dark:prose-invert max-w-none custom-md">-->
47
    <!--<div class="max-w-none custom-md">-->
48
    <slot/>
49
</div>
50

51
<!--禁用原代码块样式-->
52
<!--<script>-->
53
<!--  const observer = new MutationObserver(addPreCopyButton);-->
54
<!--  observer.observe(document.body, { childList: true, subtree: true });-->
55

56
<!--  function addPreCopyButton() {-->
57
<!--    observer.disconnect();-->
58

59
<!--    let codeBlocks = Array.from(document.querySelectorAll("pre"));-->
60

61
<!--    for (let codeBlock of codeBlocks) {-->
62
<!--      if (codeBlock.parentElement?.nodeName === "DIV" && codeBlock.parentElement?.classList.contains("code-block")) continue-->
63

64
<!--      let wrapper = document.createElement("div");-->
65
<!--      wrapper.className = "relative code-block";-->
66

67
<!--      let copyButton = document.createElement("button");-->
68
<!--      copyButton.className = "copy-btn btn-regular-dark absolute active:scale-90 h-8 w-8 top-2 right-2 opacity-75 text-sm p-1.5 rounded-lg transition-all ease-in-out";-->
69

70
<!--      codeBlock.setAttribute("tabindex", "0");-->
71
<!--      if (codeBlock.parentNode) {-->
72
<!--        codeBlock.parentNode.insertBefore(wrapper, codeBlock);-->
73
<!--      }-->
74

75
<!--      let copyIcon = `<svg class="copy-btn-icon copy-icon" xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px"><path d="M368.37-237.37q-34.48 0-58.74-24.26-24.26-24.26-24.26-58.74v-474.26q0-34.48 24.26-58.74 24.26-24.26 58.74-24.26h378.26q34.48 0 58.74 24.26 24.26 24.26 24.26 58.74v474.26q0 34.48-24.26 58.74-24.26 24.26-58.74 24.26H368.37Zm0-83h378.26v-474.26H368.37v474.26Zm-155 238q-34.48 0-58.74-24.26-24.26-24.26-24.26-58.74v-515.76q0-17.45 11.96-29.48 11.97-12.02 29.33-12.02t29.54 12.02q12.17 12.03 12.17 29.48v515.76h419.76q17.45 0 29.48 11.96 12.02 11.97 12.02 29.33t-12.02 29.54q-12.03 12.17-29.48 12.17H213.37Zm155-238v-474.26 474.26Z"/></svg>`-->
76
<!--      let successIcon = `<svg class="copy-btn-icon success-icon" xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px"><path d="m389-377.13 294.7-294.7q12.58-12.67 29.52-12.67 16.93 0 29.61 12.67 12.67 12.68 12.67 29.53 0 16.86-12.28 29.14L419.07-288.41q-12.59 12.67-29.52 12.67-16.94 0-29.62-12.67L217.41-430.93q-12.67-12.68-12.79-29.45-.12-16.77 12.55-29.45 12.68-12.67 29.62-12.67 16.93 0 29.28 12.67L389-377.13Z"/></svg>`-->
77
<!--      copyButton.innerHTML = `<div>${copyIcon} ${successIcon}</div>-->
78
<!--      `-->
79

80
<!--      wrapper.appendChild(codeBlock);-->
81
<!--      wrapper.appendChild(copyButton);-->
82

83
<!--      let timeout: ReturnType<typeof setTimeout>;-->
84
<!--      copyButton.addEventListener("click", async () => {-->
85
<!--        if (timeout) {-->
86
<!--            clearTimeout(timeout);-->
87
<!--        }-->
88
<!--        let text = codeBlock?.querySelector("code")?.innerText;-->
89
<!--        if (text === undefined) return;-->
90
<!--        await navigator.clipboard.writeText(text);-->
91
<!--        copyButton.classList.add("success");-->
92
<!--        timeout = setTimeout(() => {-->
93
<!--          copyButton.classList.remove("success");-->
94
<!--        }, 1000);-->
95
<!--      });-->
96
<!--    }-->
97

98
<!--    observer.observe(document.body, { childList: true, subtree: true });-->
99
<!--  }-->
100
<!--</script>-->

1
/* pre {
2
        @apply bg-[var(--codeblock-bg)] !important;
3
        @apply rounded-xl px-5;
4

5
        code {
6
            @apply bg-transparent text-inherit text-sm p-0;
7

8
            ::selection {
9
                @apply bg-[var(--codeblock-selection)];
10
            }
11
        }
12
    } */

1
function initCustomScrollbar() {
18 collapsed lines
2
  const bodyElement = document.querySelector('body');
3
  if (!bodyElement) return;
4
  OverlayScrollbars(
5
    // docs say that a initialization to the body element would affect native functionality like window.scrollTo
6
    // but just leave it here for now
7
    {
8
      target: bodyElement,
9
      cancel: {
10
        nativeScrollbarsOverlaid: true,    // don't initialize the overlay scrollbar if there is a native one
11
      }
12
    }, {
13
    scrollbars: {
14
      theme: 'scrollbar-base scrollbar-auto py-1',
15
      autoHide: 'move',
16
      autoHideDelay: 500,
17
      autoHideSuspend: false,
18
    },
19
  });
20

21
  // const preElements = document.querySelectorAll('pre');
22
  // preElements.forEach((ele) => {
23
  // OverlayScrollbars(ele, {
24
  //     scrollbars: {
25
  //       theme: 'scrollbar-base scrollbar-dark px-2',
26
  //       autoHide: 'leave',
27
  //       autoHideDelay: 500,
28
  //       autoHideSuspend: false
29
  //     }
30
  //   });
31
  // });
32

33
  const katexElements = document.querySelectorAll('.katex-display') as NodeListOf<HTMLElement>;
34
  katexElements.forEach((ele) => {
35
    OverlayScrollbars(ele, {
36
      scrollbars: {
37
        theme: 'scrollbar-base scrollbar-auto py-1',
38
      }
39
    });
40
  });
41
}

二、引入#

1
pnpm astro add astro-expressive-code

三、配置文件中添加双主题#

主题：https://expressive-code.com/guides/themes/#available-themes

在配置文件中添加双主题

1
export default defineConfig({
2
  // ...
3
  integrations: [
4
    // ...
5
    expressiveCode({
6
      themes: ["catppuccin-frappe", "catppuccin-latte"],
7
    })
8
  ]
9
})

修改LightDarkSwitch.svelte文件中的onMount和switchScheme方法

1
onMount(() => {
2
  mode = getStoredTheme()
3

4
  if (mode === DARK_MODE) {
5
    document.documentElement.setAttribute("data-theme", "catppuccin-frappe");
6
  } else {
7
    document.documentElement.setAttribute("data-theme", "light-plus");
8
  }
9

10
  const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)')
11
  const changeThemeWhenSchemeChanged: Parameters<
12
    typeof darkModePreference.addEventListener<'change'>
13
  >[1] = e => {
14
    applyThemeToDocument(mode)
15
  }
16
  darkModePreference.addEventListener('change', changeThemeWhenSchemeChanged)
17
  return () => {
18
    darkModePreference.removeEventListener(
19
      'change',
20
      changeThemeWhenSchemeChanged,
21
    )
22
  }
23
})

1
function switchScheme(newMode: LIGHT_DARK_MODE) {
2
  mode = newMode
3
  setTheme(newMode)
4

5
  if (mode === DARK_MODE) {
6
    document.documentElement.setAttribute("data-theme", "catppuccin-frappe");
7
  } else {
8
    document.documentElement.setAttribute("data-theme", "light-plus");
9
  }
10
}

四、使用格式方法#

标题#

1
```js  title="标题"
2
console.log("Line 1");
3
console.log("Line 2");
4
let a = 1;
5
let b = 2;

高亮指定行#

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

新增/删除指定行#

1
```js   ins={3,7} del={6}
2
console.log("Line 1");
3
console.log("Line 2");
4
let a = 1;
5
let b = 2;
6
let c = 3;
7
let d = 4;
8
let e = 5;
9
let f = 6;
10
let g = 7;
11
console.log(a + b);
12
let h = 4;
13
let i = 5;
14
let j = 6;
15
let k = 7;
16
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;

折叠代码/代码行数#

需要引入#

1
pnpm add @expressive-code/plugin-line-numbers //显示行数
2
pnpm add @expressive-code/plugin-collapsible-sections //折叠

1
import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers'
2
import { pluginCollapsibleSections } from '@expressive-code/plugin-collapsible-sections'
3
...
4
expressiveCode({
5
  themes: ["catppuccin-frappe", "catppuccin-latte"],
6
  plugins: [pluginLineNumbers(),pluginCollapsibleSections()],
7
})],

例：#

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

一、注释原代码块样式#

二、引入#

三、配置文件中添加双主题#

四、使用格式方法#

标题#

** 高亮指定行**#

** 新增/删除指定行**#

高亮块#

折叠代码/代码行数#

需要引入#

例：#

高亮指定行#

新增/删除指定行#