How to use Rehype Pretty Code with Nuxt3 markdown

Question

I am trying to get the rehype pretty code plugin set up in nuxt content v2. According to the docs it already uses rehype and remark under the hood and the config file does allow for adding these plugins.

In the nuxt content v2 docs it states:

This module uses remark and rehype under the hood to compile markdown files into JSON AST that will be stored into the body variable. To configure how the module will parse Markdown, you can use markdown.remarkPlugins and markdown.rehypePlugins in your nuxt.config.ts.

It then gives this example of how the nuxt.config.ts file looks:

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
        }
      },

      // Array syntax can be used to add plugins
      rehypePlugins: [
        'rehype-figure'
      ]
    }
  }
})

I do not understand why I cannot use rehype pretty code syntax in the markdown. I did install it and added it to the rehypePlugins array in the nuxt.config.ts file and I can't get it to work.

One of the reasons I would like to use it is because it allows highlighting a token in a code block.

```js /foo/
const foo = 1
```