添加 shiki 官方的 transformers#

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

改动点#

1. 在配置里添加 transformers

import { 
  transformerMetaHighlight, 
  transformerMetaWordHighlight, 
  transformerNotationDiff, 
  transformerNotationErrorLevel, 
  transformerNotationHighlight, 
  transformerNotationWordHighlight, 
} from "@shikijs/transformers"; 

export default defineConfig({
  markdown: {
    shikiConfig: {
      transformers: [
        // ...
        transformerNotationDiff(), 
        transformerNotationHighlight(), 
        transformerNotationWordHighlight(), 
        transformerNotationErrorLevel(), 
        transformerMetaHighlight(), 
        transformerMetaWordHighlight(), 
      ],
    },
  },
});

2. 添加样式

<style is:global>
/* transformerNotationDiff */
.line.diff.add {
  background-color: #174d2c;
}
.line.diff.remove {
  background-color: #440e11;
}
.line.diff.add:before {
  content: '+ ';
  color: #4affa8;
  opacity: 0.6;
}
.line.diff.remove:before {
  content: '- ';
  color: #ff5e61;
  opacity: 0.6;
}

/* transformerNotationHighlight */
.line.highlighted {
  background-color: #3c3f45;
}

/* transformerNotationWordHighlight */
.highlighted-word {
  background-color: #3c3f45;
  border: 1px solid #464b52;
  padding: 1px 3px;
  margin: -1px -2px;
  border-radius: 4px;
}

/* transformerNotationErrorLevel */
.line.highlighted.error {
  background-color: #440e11;
}
.line.highlighted.warning {
  background-color: #583410;
}
</style>

添加代码块的标题栏#

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

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

```

改动点#

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

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

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

      if (!language) {
        return
      }

      const className = "remark-code-title";
      let titleNode;

      // 只显示语言
      titleNode = {
        type: "html",
        value: `<div class="${className}">
            <div id="only-lang">${language}</div>
            <div id="separate-line"></div>
          </div>`.trim(),
      };

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

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

          // 显示文件名和语言
          titleNode = {
            type: "html",
            value: `<div class="${className}">
                <div id="filename-with-lang">
                  <div>${meta}</div>
                  <div>${language}</div>
                </div>
                <div id="separate-line">
                </div>
              </div>`.trim(),
          };
        }
      }

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

    // 插入元素
    for (const { index, titleNode } of nodesToInsert.reverse()) {
      tree.children.splice(index, 0, titleNode);
    }
  };
}

2. 导入插件

import { remarkCodeTitle } from "./src/plugins/remark-code-title.js"; 

export default defineConfig({
  markdown: {
    remarkPlugins: [
      // ...
      remarkCodeTitle, 
    ],
  },
});