如何在Nuxt Content v2中配置Rehype Pretty Code插件？

• 插件配置格式错误
  rehype-pretty-code需要传入带配置的数组项，而非直接添加插件名称。正确的nuxt.config.ts配置示例：

export default defineNuxtConfig({
  content: {
    markdown: {
      rehypePlugins: [
        ['rehype-pretty-code', {
          theme: 'github-dark',
          onVisitLine(node) {
            if (node.children.length === 0) {
              node.children = [{ type: 'text', value: ' ' }];
            }
          }
        }]
      ]
    }
  }
})

必须使用数组嵌套数组的结构，第一个元素为插件名，第二个为配置对象。

• 依赖版本不兼容
  Nuxt Content v2的rehype依赖版本可能与最新版rehype-pretty-code冲突，可尝试安装适配版本，如rehype-pretty-code@0.10.0，安装后重启Nuxt服务。

• 语法使用错误
  token高亮的语法需注意格式，正则与代码内容要分行：

const foo = 1;
const bar = 2;

同时确保使用的主题支持自定义token高亮特性。

• 未引入对应样式
  rehype-pretty-code需要样式文件来渲染高亮效果，可在nuxt.config.ts中全局引入：

export default defineNuxtConfig({
  css: ['rehype-pretty-code/styles.css']
})

自定义主题则需自行编写对应CSS类样式。

• 缓存导致配置未生效
  删除.nuxt文件夹与node_modules/.cache文件夹，重新执行npm run dev启动服务，清除旧编译缓存。

内容的提问来源于stack exchange，提问作者dbzx10299