Astro：带有备注代码额外插件的Shiki语法突出显示不起作用

Question

我在astro.config.mjs文件中有以下配置，但在我添加了remark-code-extra插件后，语法高亮显示不起作用。不确定我应该如何配置它使其工作。提前感谢!

import tokyoStorm from "./src/code-themes/tokyo-storm.json";
import codeExtra from "remark-code-extra";
export default defineConfig({
...
markdown: {
shikiConfig: {
theme: tokyoStorm,
wrap: true,
},    
remarkPlugins: [
[codeExtra, {
transform: node => node.meta ? ({
before: [
{
type: 'element',
tagName: 'div',
properties: {
class: "code-label"
},
children: [
{
type: "element",
tagName: 'span',
children: [
{
type: "text",
value: node.meta
}
]
}
]
}
]
}) : null
}]
]
},
});

Answer 1

这不起作用，因为Astro的语法高亮显示运行在所有其他注释插件之后，remark-code-extra在remark-shiki可以添加语法高亮显示之前将代码块包装在div中。(remark-shiki只能对非嵌套code块添加语法高亮)

要解决这个问题，您可以:

1. 使用rehype插件来转换你的代码块而不是remark-code-extra。Rehype插件在remark插件之后运行，因此代码块在转换时将应用Astro的语法高亮。

2. 在调用remark-code-extra之前添加自己的注释语法高亮插件。