改造博客的代码块 - 伊卡的记事本

CAUTION
因为有更好的方案，该做法已被废弃
请参考增强代码块功能

添加 shiki 官方的 transformers#

shiki是 Astro&Fuwari 默认的代码块渲染器
transformers可以实现代码高亮等功能
官网地址：transformers🔗

改动点#

在配置里添加 transformers

1
import { // [!code ++]
2
  transformerMetaHighlight, // [!code ++]
3
  transformerMetaWordHighlight, // [!code ++]
4
  transformerNotationDiff, // [!code ++]
5
  transformerNotationErrorLevel, // [!code ++]
6
  transformerNotationHighlight, // [!code ++]
7
  transformerNotationWordHighlight, // [!code ++]
8
} from "@shikijs/transformers"; // [!code ++]
9

10
export default defineConfig({
11
  markdown: {
12
    shikiConfig: {
13
      transformers: [
14
        // ...
15
        transformerNotationDiff(), // [!code ++]
16
        transformerNotationHighlight(), // [!code ++]
17
        transformerNotationWordHighlight(), // [!code ++]
18
        transformerNotationErrorLevel(), // [!code ++]
19
        transformerMetaHighlight(), // [!code ++]
20
        transformerMetaWordHighlight(), // [!code ++]
21
      ],
22
    },
23
  },
24
});

添加样式

1
<style is:global>
2
/* transformerNotationDiff */
3
.line.diff.add {
4
  background-color: #174d2c;
5
}
6
.line.diff.remove {
7
  background-color: #440e11;
8
}
9
.line.diff.add:before {
10
  content: '+ ';
11
  color: #4affa8;
12
  opacity: 0.6;
13
}
14
.line.diff.remove:before {
15
  content: '- ';
16
  color: #ff5e61;
17
  opacity: 0.6;
18
}
19

20
/* transformerNotationHighlight */
21
.line.highlighted {
22
  background-color: #3c3f45;
23
}
24

25
/* transformerNotationWordHighlight */
26
.highlighted-word {
27
  background-color: #3c3f45;
28
  border: 1px solid #464b52;
29
  padding: 1px 3px;
30
  margin: -1px -2px;
31
  border-radius: 4px;
32
}
33

34
/* transformerNotationErrorLevel */
35
.line.highlighted.error {
36
  background-color: #440e11;
37
}
38
.line.highlighted.warning {
39
  background-color: #583410;
40
}
41
</style>

添加代码块的标题栏#

像这样在语言的后面可以加上file=路径\文件名

1
```astro file=src\components\misc\Markdown.astro
2

3
```

改动点#

在📁plugins里创建remark-code-title.js文件

1
import { visit } from "unist-util-visit";
2

3
export function remarkCodeTitle() {
4
  return (tree, { data }) => {
5
    const nodesToInsert = [];
6
    visit(tree, "code", (node, index) => {
7
      const language = node.lang;
8
      let meta = node.meta;
9

10
      if (!language) {
11
        return
12
      }
13

14
      const className = "remark-code-title";
15
      let titleNode;
16

17
      // 只显示语言
18
      titleNode = {
19
        type: "html",
20
        value: `<div class="${className}">
21
            <div id="only-lang">${language}</div>
22
            <div id="separate-line"></div>
23
          </div>`.trim(),
24
      };
25

26
      if (meta) {
27
        // 排除掉其他 meta 项
28
        const metas = meta.split(" ").filter((m) => m.includes("file="));
29

30
        if (metas.length > 0) {
31
          meta = metas[0].replace("file=", "");
32

33
          // 显示文件名和语言
34
          titleNode = {
35
            type: "html",
36
            value: `<div class="${className}">
37
                <div id="filename-with-lang">
38
                  <div>${meta}</div>
39
                  <div>${language}</div>
40
                </div>
41
                <div id="separate-line">
42
                </div>
43
              </div>`.trim(),
44
          };
45
        }
46
      }
47

48
      // 保存需要插入的元素
49
      nodesToInsert.push({ index, titleNode });
50
    });
51

52
    // 插入元素
53
    for (const { index, titleNode } of nodesToInsert.reverse()) {
54
      tree.children.splice(index, 0, titleNode);
55
    }
56
  };
57
}

导入插件

1
import { remarkCodeTitle } from "./src/plugins/remark-code-title.js"; // [!code ++]
2

3
export default defineConfig({
4
  markdown: {
5
    remarkPlugins: [
6
      // ...
7
      remarkCodeTitle, // [!code ++]
8
    ],
9
  },
10
});