1. 问题描述
VitePress 的 Markdown 扩展可以通过在行尾注释中添加 [!code ++] 和 [!code --] 来达到 Color Diff 的效果（参考此官方文档）。然而，在 XML 格式的代码中，此功能出现了一些问题。
问题代码如下：
```xml
<note>
<to>Tove</to> <!-- [!code ++] -->
<from>Jani</from> <!-- [!code --] -->
<heading>Reminder</heading> <!-- [!code ++] -->
<body>Don't forget me this weekend!</body>
</note>
```
渲染效果如下：
2. 分析
根据此文档可知，VitePress 使用 Shiki 作为语法高亮的工具，并且 [!code ++] 和 [!code --] 的用法也是继承自 Shiki 的官方 transformerNotationDiff（参考此链接）。
而通过参考 StackOverflow: How do I comment out a block of tags in XML? 可知，XML 的 <!-- Comment --> 注释中，若 Comment 含有 -- 字符，Comment 会异常终止。
综上，这显然是 Shiki 库在处理 XML Code 时候的一个 BUG，并且社区中已经有开发者发现并提出了相关 issue。
3. 解决办法
来自 VitePress 的相关 issue 讨论中，VitePress 维护者提供了一个临时的解决方案，即通过配置自定义的 codeTransformers 来规避此问题。
即在 VitePress 的配置文件中（需自行安装 pkg @shikijs/transformers）：
1import { defineConfig } from "vitepress";
2import { transformerNotationMap } from "@shikijs/transformers"; // Add this line
3
4export default defineConfig({
5 title: "My Awesome Project",
6 description: "A VitePress Site",
7
8 // Add the following code
9 markdown: {
10 codeTransformers: [
11 transformerNotationMap({
12 classMap: { add: "diff add", del: "diff remove" },
13 classActivePre: "has-diff",
14 matchAlgorithm: "v3",
15 }) as any,
16 ],
17 },
18
19});
此时，就可以使用如下的 Color Diff 了：
```xml
<note>
<to>Tove</to> <!-- [!code add] -->
<from>Jani</from> <!-- [!code del] -->
<heading>Reminder</heading> <!-- [!code add] -->
<body>Don't forget me this weekend!</body>
</note>
```
渲染效果如下：
版权声明：本文遵循 CC BY-SA 4.0 版权协议，转载请附上原文出处链接和本声明。
Copyright statement: This article follows the CC BY-SA 4.0 copyright agreement. For reprinting, please attach the original source link and this statement.