FuwariのデフォルトコードブロックはLanguageやファイル名を表示できないため、astro-expressive-codeを利用してカスタマイズしてみました。

Expressive Codeとは#

Expressive Code は、開発者がコードスニペットを美しく、分かりやすく表示できるようにするためのライブラリです。Markdownベースのドキュメント、ブログ、技術記事などで、コードの見た目を改善するために活用されます。

このライブラリはプラグインベースの設計になっており、カスタマイズ性が高いのが特徴です。

Expressive Code

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

expressive-code.com

インストール方法#

以下のコマンドでastro-expressive-codeと@expressive-code/plugin-line-numbersをインストールする

pnpm add astro-expressive-code @expressive-code/plugin-line-numbers

astro.config.mjsで定義する

1
import expressiveCode from "astro-expressive-code";
2
import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
3
import remnarkLinkCard from "remark-link-card";
4

5
// https://astro.build/config
6
export default defineConfig({
7
  site: "https://www.y-shin.net/",
8
  base: "/",
9
  trailingSlash: "always",
10
  integrations: [
11
    tailwind({
12
      nesting: true,
13
    }),
14
    swup({
15
      theme: false,
16
      animationClass: "transition-swup-", // see https://swup.js.org/options/#animationselector
17
      // the default value `transition-` cause transition delay
18
      // when the Tailwind class `transition-all` is used
19
      containers: ["main", "#toc"],
20
      smoothScrolling: true,
21
      cache: true,
22
      preload: true,
23
      accessibility: true,
24
      updateHead: true,
25
      updateBodyClass: false,
26
      globalInstance: true,
27
    }),
28
    icon({
29
      include: {
30
        "preprocess: vitePreprocess(),": ["*"],
31
        "fa6-brands": ["*"],
32
        "fa6-regular": ["*"],
33
        "fa6-solid": ["*"],
34
      },
35
    }),
36
    svelte(),
37
    sitemap(),
38
    Compress({
39
      CSS: false,
40
      Image: false,
41
      Action: {
42
        Passed: async () => true, // https://github.com/PlayForm/Compress/issues/376
43
      },
44
    }),
45
    expressiveCode({
46
      themes: ["aurora-x"],
47
      plugins: [pluginLineNumbers()],
48
    }),
49
  ],
50
  markdown: {
51
    remarkPlugins: [[remnarkLinkCard, { shortenUrl: true, cache: true }], remarkMath, remarkReadingTime, remarkExcerpt, remarkGithubAdmonitionsToDirectives, remarkDirective, remarkSectionize, parseDirectiveNode],
52
    rehypePlugins: [
53
      rehypeKatex,
54
      rehypeSlug,
55
      [
56
        rehypeComponents,
57
        {
58
          components: {
59
            github: GithubCardComponent,
60
            linkcard: LinkCardComponent,
61
            note: (x, y) => AdmonitionComponent(x, y, "note"),
62
            tip: (x, y) => AdmonitionComponent(x, y, "tip"),
63
            important: (x, y) => AdmonitionComponent(x, y, "important"),
64
            caution: (x, y) => AdmonitionComponent(x, y, "caution"),
65
            warning: (x, y) => AdmonitionComponent(x, y, "warning"),
66
          },
67
        },
68
      ],
69
      [
70
        rehypeAutolinkHeadings,
71
        {
72
          behavior: "append",
73
          properties: {
74
            className: ["anchor"],
75
          },
76
          content: {
77
            type: "element",
78
            tagName: "span",
79
            properties: {
80
              className: ["anchor-icon"],
81
              "data-pagefind-ignore": true,
82
            },
83
            children: [
84
              {
85
                type: "text",
86
                value: "#",
87
              },
88
            ],
89
          },
90
        },
91
      ],
92
    ],
93
  },
94
  vite: {
95
    build: {
96
      rollupOptions: {
97
        onwarn(warning, warn) {
98
          // temporarily suppress this warning
99
          if (warning.message.includes("is dynamically imported by") && warning.message.includes("but also statically imported by")) {
100
            return;
101
          }
102
          warn(warning);
103
        },
104
      },
105
    },
106
  },
107
});

既存スクリプトの編集#

src/layouts/Layout.astroでpreElementsをコメントアウトする

1
function initCustomScrollbar() {
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
}

src/component/misc/Markdown.astroを編集し、コピーボタンのスクリプトをコメントアウトする。

1
---
2
import '@fontsource-variable/jetbrains-mono'
3
import '@fontsource-variable/jetbrains-mono/wght-italic.css'
4

5
interface Props {
6
  class: string
7
}
8
const className = Astro.props.class
9
---
10
<div data-pagefind-body class=`prose dark:prose-invert prose-base !max-w-none custom-md ${className}`>
11
    <!--<div class="prose dark:prose-invert max-w-none custom-md">-->
12
    <!--<div class="max-w-none custom-md">-->
13
    <slot/>
14
</div>
15

16
<script>
17
    let linkCards = Array.from(document.querySelectorAll(".rlc-container")) as HTMLElement[];
18
    for (let linkCard of linkCards) {
19
        linkCard.classList.add("no-styling");
20
        linkCard.style.textDecoration = "none";
21
        linkCard.setAttribute('target','_blank');
22
    }
23
</script>
24

25
<!--
26
<script>
27
  const observer = new MutationObserver(addPreCopyButton);
28
  observer.observe(document.body, { childList: true, subtree: true });
29

30
  document.addEventListener("DOMContentLoaded", addPreCopyButton);
31

32
  function addPreCopyButton() {
33
    observer.disconnect();
34

35
    let codeBlocks = Array.from(document.querySelectorAll("pre"));
36

37
    for (let codeBlock of codeBlocks) {
38
      if (codeBlock.parentElement?.nodeName === "DIV" && codeBlock.parentElement?.classList.contains("code-block")) continue
39

40
      let wrapper = document.createElement("div");
41
      wrapper.className = "relative code-block";
42

43
      let copyButton = document.createElement("button");
44
      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";
45

46
      codeBlock.setAttribute("tabindex", "0");
47
      if (codeBlock.parentNode) {
48
        codeBlock.parentNode.insertBefore(wrapper, codeBlock);
49
      }
50

51
      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>`
52
      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>`
53
      copyButton.innerHTML = `<div>${copyIcon} ${successIcon}</div>
54
      `
55

56
      wrapper.appendChild(codeBlock);
57
      wrapper.appendChild(copyButton);
58

59
      let timeout: ReturnType<typeof setTimeout>;
60
      copyButton.addEventListener("click", async () => {
61
        if (timeout) {
62
            clearTimeout(timeout);
63
        }
64
        let text = codeBlock?.querySelector("code")?.innerText;
65
        if (text === undefined) return;
66
        await navigator.clipboard.writeText(text);
67
        copyButton.classList.add("success");
68
        timeout = setTimeout(() => {
69
          copyButton.classList.remove("success");
70
        }, 1000);
71
      });
72
    }
73

74
    observer.observe(document.body, { childList: true, subtree: true });
75
  }
76
</script>
77
-->