Nuxt Content与ShikiJS行高亮功能失效问题求助

问题核心是Nuxt Content通过[!code highlight]标记的行虽已添加.highlighted类，但默认Shiki主题未提供该类的样式定义，导致视觉上无高亮效果。以下是几种可行的解决方法：

方法一：添加全局自定义CSS #

1. 在项目中创建全局CSS文件（如assets/css/content.css），补充.highlighted类的样式：

.shiki .highlighted {
  /* 适配深色主题的半透明背景，可根据主题调整颜色 */
  background-color: rgba(255, 255, 255, 0.1);
  /* 可选：添加左侧高亮边框增强视觉效果 */
  border-left: 3px solid #6366f1;
  padding-left: 0.5rem;
}

2. 在nuxt.config.js中引入该CSS文件：

export default defineNuxtConfig({
  // ...其他原有配置
  css: ['~/assets/css/content.css'],
})

方法二：通过Tailwind CSS自定义工具类 #

如果项目使用Tailwind CSS，可通过自定义工具类实现样式：

1. 在tailwind.config.js中添加自定义样式和工具类：

module.exports = {
  // ...其他原有配置
  theme: {
    extend: {
      backgroundColor: {
        'code-highlight': 'rgba(255, 255, 255, 0.1)',
      },
      borderLeftColor: {
        'code-highlight': '#6366f1',
      },
    },
  },
  plugins: [
    function ({ addUtilities }) {
      addUtilities({
        '.code-highlighted': {
          backgroundColor: 'var(--tw-bg-code-highlight)',
          borderLeftWidth: '3px',
          borderLeftColor: 'var(--tw-border-code-highlight)',
          paddingLeft: '0.5rem',
        },
      })
    }
  ]
}

2. 修改Nuxt Content配置，指定高亮行使用自定义类：

export default defineNuxtConfig({
  content: {
    highlight: {
      theme: 'material-theme-darker',
      lineOptions: {
        highlight: {
          className: 'code-highlighted'
        }
      }
    },
  },
  // ...其他原有配置
})

方法三：确保依赖版本兼容 #

执行命令更新@nuxt/content到最新版本，避免旧版本的样式缺失问题：

npm update @nuxt/content
# 或使用yarn
yarn upgrade @nuxt/content

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