行突出显示在 Nuxt Content 和 ShikiJS 中不起作用

Question

我使用最新版本的 Nuxt Content。这是我的配置

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: {
    enabled: true,
  },
  content: {
    highlight: {
      theme: 'material-theme-darker',
    },
  },
  modules: [
    '@nuxt/content',
    '@nuxtjs/tailwindcss',
  ],
})

当我使用以下标记渲染 .md 时：

<div class="flex justify-start mb-4">
  <VToggle v-model="fixSpacing"> // [!code highlight]
    Make the hero section shorter
  </VToggle>
</div>

该片段已突出显示，但该行未突出显示。正如我从渲染的 HTML 中看到的，它是

.highlighted

类，但该类没有任何样式。相反，将应用默认背景颜色。

其他 Shiki 变形金刚也会发生同样的情况。应用了类，但它们没有样式。如何解决这个问题？

Answer 1

您需要先安装

@shiki/transformers

软件包

npm i -D @shikijs/transformers

然后你需要显式导入它

import {
  transformerNotationHighlight
} from '@shikijs/transformers'

如果您已经使用 nuxt，您可以使用语法突出显示行，您可以在此处阅读有关

ProsePre

组件的更多信息。

 ```js [file.js]{4-6,7} 元信息=val
  导出默认值 () => {
    console.log('代码块')
  }
  ````

在您的情况下，元素上已经有一个突出显示的类，因此您需要使用 css 来处理它。

.line.highlighted {
  background: blue;
}