Astro：使用 remark-code-extra 插件的 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

将代码块包装在

div

中，然后

remark-shiki

可以向它们添加语法突出显示。 （

remark-shiki

可以仅向非嵌套

code

块添加语法高亮）

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

1. 使用 rehype 插件来转换代码块，而不是

   remark-code-extra

   。 Rehype 插件在 remark 插件之后运行，因此代码块在转换时将应用 Astro 的语法突出显示。

2. 在调用之前添加自己的备注语法高亮插件

   remark-code-extra

   。