fix: ProseCode class attribute warning

[bobby169]

#2111

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[netlify]

✅ Deploy Preview for nuxt-content canceled.

Built without sensitive environment variables

Name	Link
🔨 Latest commit	a0e1fa2
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt-content/deploys/649aa4fd3c953200089740f0

[narasimhajupally]

we can just wrap the slot in <div> making it root node, doing so the class prop will be automatically inherited.

[farnabaz]

Thanks for the PR.
Instead of wrapping code, a better solution would be moving class attribute from component itself into inner code tag ( pre > code)

from:

content/src/runtime/markdown-parser/handler/code.ts

Lines 27 to 29 in d7bccdc

	className: [`language-${language}`]
	},
	[h(node, 'pre', {}, [h(node, 'code', { __ignoreMap: '' }, [u('text', code)])])]

to:

[h(node, 'pre', {}, [h(node, 'code', { __ignoreMap: '', className: [`language-${language}`] }, [u('text', code)])])]

[wJoenn]

@farnabaz I just tried your solution locally and it doesn't solve Vue's warning.
Bobby's fix by wrapping the slot inside a div does on the other hand.

Wouldn't it be just fine to merge this as is ?

It could even serve a second purpose by adding a span with the filename to be able to display the filename in the corner of the code block

<template>
  <div class="codeBlock">
    <span class="filename">{{ filename }}</span>
    <slot />
  </div>
</template>

<style>
.codeBlock {
  position: relative;
}

.codeBlock .filename {
  position: absolute;
  right: 20px;
  top: 10px;
}

.codeBlock pre code .line {
  display: block;
  min-height: 1rem;
}
</style>

[farnabaz]

Having filename indeed is a good thing to have, but also some user may not want to have a wrapper tag.
As I checked a couple of websites, they add the class into pre tag. Check https://shiki.matsu.io/

Also, I've checked it locally, adding class to pre tag resolves the warning 🙂

[farnabaz]

I'm closing this in favor of #2187.
This issue is fixed in nuxt-mdc package