增强Fuwari的代码块功能 - 伊卡的记事本

前言
这是代替旧方案的新方案
Expressive Code是Astro代码块的一个增强插件

Present your source code on the web, making it easy to understand and visually stunning. All batteries included!

重要
2025年3月26日更新
目前Hasenpfote大佬已经将该功能提交到Fwrari的 PR 里（还没有合并到主分支）
可以优先参考他的代码
feat: improve code block feature with Expressive Code

一、注释Fuwari自带的代码块样式#

由于Fuwari自带的代码块样式会干扰到插件的样式，所以先要把以下代码注释掉

1
<!-- <script>
2
  const observer = new MutationObserver(addPreCopyButton);
3
  observer.observe(document.body, { childList: true, subtree: true });
4

5
  document.addEventListener("DOMContentLoaded", addPreCopyButton);
6

7
  function addPreCopyButton() {
8
    observer.disconnect();
9

10
    let codeBlocks = Array.from(document.querySelectorAll("pre"));
11

12
    for (let codeBlock of codeBlocks) {
13
      if (codeBlock.parentElement?.nodeName === "DIV" && codeBlock.parentElement?.classList.contains("code-block")) continue
14

15
      let wrapper = document.createElement("div");
16
      wrapper.className = "relative code-block";
17

18
      let copyButton = document.createElement("button");
19
      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";
20

21
      codeBlock.setAttribute("tabindex", "0");
22
      if (codeBlock.parentNode) {
23
        codeBlock.parentNode.insertBefore(wrapper, codeBlock);
24
      }
25

26
      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>`
27
      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>`
28
      copyButton.innerHTML = `<div>${copyIcon} ${successIcon}</div>
29
      `
30

31
      wrapper.appendChild(codeBlock);
32
      wrapper.appendChild(copyButton);
33

34
      let timeout: ReturnType<typeof setTimeout>;
35
      copyButton.addEventListener("click", async () => {
36
        if (timeout) {
37
            clearTimeout(timeout);
38
        }
39
        let text = codeBlock?.querySelector("code")?.innerText;
40
        if (text === undefined) return;
41
        await navigator.clipboard.writeText(text);
42
        copyButton.classList.add("success");
43
        timeout = setTimeout(() => {
44
          copyButton.classList.remove("success");
45
        }, 1000);
46
      });
47
    }
48

49
    observer.observe(document.body, { childList: true, subtree: true });
50
  }
51
</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
}

二、导入Expressive Code#

直接参考 https://expressive-code.com/installation/#astro

三、添加代码块的黑暗模式#

官方主题列表：https://expressive-code.com/guides/themes/#available-themes

在配置文件中添加双主题

1
export default defineConfig({
2
  // ...
3
  integrations: [
4
    // ...
5
    expressiveCode({
6
      themes: ["catppuccin-frappe", "light-plus"],
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
}

NOTE
需要重启项目才能应用

四、部分功能测试#

4.1 代码块标题#

1
```js title="demo.js"
2
function demo() {
3

4
}
5
```

1
function demo() {
2

3
}

4.2 行标记#

1
```text {1, 5-6} ins={2-3} del={8}
2
第1行
3
第2行
4
第3行
5
第4行
6
第5行
7
第6行
8
第7行
9
第8行
10
```

1
第1行
2
第2行
3
第3行
4
第4行
5
第5行
6
第6行
7
第7行
8
第8行

4.3 文本标记#

1
```text "c c++" ins="csharp" del="ruby"
2
c c++ java
3
javascript python csharp
4
rust ruby golang
5
```

1
c c++ java
2
javascript python csharp
3
rust ruby golang

4.4 代码折叠#

NOTE
需要额外安装 https://expressive-code.com/plugins/collapsible-sections/

1
```csharp collapse={4-5, 6-8} title="Demo.cs"
2
public int Demo()
3
{
4
  var i = 1 + 1;
5

6
  //折叠区域
7
  //折叠区域
8
  //折叠区域
9

10
  return i;
11
}
12
```

1
public int Demo()
2
{
3
  var i = 1 + 1;
2 collapsed lines
4

5
  //折叠区域
3 collapsed lines
6
  //折叠区域
7
  //折叠区域
8

9
  return i;
10
}

4.5 显示代码行数#

NOTE
需要额外安装 https://expressive-code.com/plugins/line-numbers/

1
```text startLineNumber=5
2
第5行
3
第6行
4
```

5
第5行
6
第6行