Using rehype pretty code in nuxt content

[dbzx10299]

I have a custom ProsePre component, and I looked at the docs for markdown configuration. It gives this example

export default defineNuxtConfig({
  content: {
    markdown: {
      // Object syntax can be used to override default options
      remarkPlugins: {
        // Override remark-emoji options
        'remark-emoji': {
          emoticon: true
        },
        // Disable remark-gfm
        'remark-gfm': false,
        // Add remark-oembed
        'remark-oembed': {
          // Options
        }
      },
    }
  }
})

and also an example for rehype. I want to setup rehype-pretty-code but installing it with npm and adding it to the rehype plugins does nothing:

export default defineNuxtConfig({
  content: {
    markdown: {
      rehypePlugins: [
        'rehype-pretty-code
      ]
    }
  }
})

I am a bit confused where to start in solving this. Do I need a custom transformer? Or is there something simpler I can do in the nuxt config that I don't know about?

I would like to be able to write markdown like this so that foo would have a special class applied so that just the token could be highlighted.

```js /foo/
  const foo = 'bar'
```

The shiki highlighter has an option for tokens, but I am having a hard time knowing the best way to solve this.

renderToHtml(tokens, {
  fg: highlighter.getForegroundColor('css-variables'),
  bg: highlighter.getBackgroundColor('css-variables'),
  elements: {
    pre({ children, className, style }) {
      return `<pre class="code-block_pre">${children}</pre>`
    },
    code({ children }) {
      return `<code class="code-block_code">${children}</code>`
    },
    line({ className, index, children}) {
      const isHighlighted = props.highlights?.includes(index + 1) ?? false
      return `<span class="${className} ${isHighlighted ? 'highlighted-line' : '' }">${children}</span>`
    },
    token({ index, children, style }) {
      // ...
    }
  }
})