use shiki decorations in nuxt content

[dbzx10299]

In the shiki docs it gives an example of how to use decorations

const html = await codeToHtml(code, {
  theme: 'vitesse-light',
  lang: 'ts',
  decorations: [ 
    {
      // line and character are 0-indexed
      start: { line: 1, character: 0 },
      end: { line: 1, character: 11 },
      properties: { class: 'highlighted-word' }
    }
  ]
})

If I have a custom prose pre component i need to be able to generate a decoration object and push it into the decorations array.

I cannot figure this out and I dont understand how I can get at a certain value in a markdown file. For example in the file below, how can I get access to the /foo/ value in the prose pre component?

```js /foo/
function foo() {
  console.log('foo'
}
```

and since the prose pre component is generated with three backticks, is there any way I could pass in a custom prop?

[AbhimanyuAryan]

interesting I am also looking for an answer to this

[phat-dang]

You can use the default ProsePre (https://content.nuxt.com/components/prose#prosepre).
Source: https://github.com/nuxt-modules/mdc/blob/main/src/runtime/components/prose/ProsePre.vue

Then, custom your template and css