How to properly use code highlight feature to add additional meta?

[stefanobartoletti]

I'm trying to set a working shiki configuration and implement some additional meta besides the code itself.

I'd like to be able to render the filename, the language, highlighted lines and possibly a "copy" button, pretty much the features that you can see in many documentation websites, i.e. like Nuxt itself (not nexessariy with this exact layout):

I'm unable to understand how to properly implement this, the readme does not seem to be clear enough on this, and if this is something that should enabled/configured here or not.

I can see that the ProsePre.vue component https://github.com/nuxt-modules/mdc/blob/main/src/runtime/components/prose/ProsePre.vue accepts some props like language, filename and highlights, but it is not obvious if and how it is using them.

Can you please explain how to do this? Thanks :)

[julie-ng]

If you're referring to syntax highlighting based on coding language, that's done in markdown, not mdc, i.e. you start your blocks with the triple backtick.

```javascript
console.log(…)
```

The rest you can build yourself in a custom component that takes properties for file name, etc., which is what I did.

Did I understand your question correctly?

[stefanobartoletti]

Thanks for your answer @julie-ng, to better explain what I was referring to, I have this on my source markdown

```js [file.js]
var pic = new Image(); 
  pic.onload = function();  // [!code highlight]
  pic.src = 'http://i.imgur.com/hvGAPwJ.png'; //Last
    ```

And it renders like this on my frontend

The language is correctly recognized and highlighted (here is js), and I have also correctly indicated other "meta" like filename and highlighted lines, according to Shiki standards.

Anyway, neither the filename and the highlighted line are displayed. The filename itself does not seem to be passed as a prop anywhere, while the highlighted lines are given a custom class, but there is not actual styling.

I was thinking that the Shiki integration in this module was complete, so I'm not sure if this behavior is wanted or bug.

Apparently a custom prosePre component has to be built by the end user, but it feels like it is something that should be handled directly by the module.

I can also see that every span has a line attribute, apparently to display line numbers, but even this seems to be not fully implemented, as nothing is printed on screen.

[robinkloeckner]

Anyway, neither the filename and the highlighted line are displayed. The filename itself does not seem to be passed as a prop anywhere, while the highlighted lines are given a custom class, but there is not actual styling.

I was thinking that the Shiki integration in this module was complete, so I'm not sure if this behavior is wanted or bug.

Apparently a custom prosePre component has to be built by the end user, but it feels like it is something that should be handled directly by the module.

Yes @stefanobartoletti, you need to extend the ProsePre.vue component by yourself in order to display the filename, language and meta props according to your needs or to add a copy to clipboard-button.

[stefanobartoletti]

Thanks @robinkloeckner ✌️

[babalugats76]

@stefanobartoletti I have a similar use case, would you be open to sharing how you overwrote that component? Thanks for considering!

[stefanobartoletti]

Just like it is explained in the readme, by using a custom prose component via the map property

https://github.com/nuxt-modules/mdc?tab=readme-ov-file#prose-components

[brianmutiso]

kindly do you consider to show some code?