internal component ProseCode class attribute seems to be not working

[narasimhajupally]

Environment

• Operating System: Linux
• Node Version: v18.16.0
• Nuxt Version: 3.5.3
• Nitro Version: 2.4.1
• Package Manager: [email protected]
• Builder: vite
• User Config: modules, colorMode, css, content, devtools
• Runtime Modules: @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxt/[email protected], [email protected], @nuxt/[email protected]
• Build Modules: -

Reproduction

We can the following warning

Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 
  at <ProseCode class="language-javascript" code="var num1, num2, sum;\nnum1 = prompt(\"Enter first number\");\nnum2 = prompt(\"Enter second number\");\nsum = parseInt(num1) + parseInt(num2); // \"+\" means \"add\"\nalert(\"Sum = \" + sum); // \"+\" means combine into a string\n" language="javascript"  ... > 
  at <AsyncComponentWrapper class="language-javascript" code="var num1, num2, sum;\nnum1 = prompt(\"Enter first number\");\nnum2 = prompt(\"Enter second number\");\nsum = parseInt(num1) + parseInt(num2); // \"+\" means \"add\"\nalert(\"Sum = \" + sum); // \"+\" means combine into a string\n" language="javascript"  ... > 
  at <ContentRendererMarkdown value=

clone this repo https://github.com/narasimhajupally/tailwind-nuxtjs-starter-blog and go to route /blog/code-sample
you will see the warning [Vue warn] in the developer console.

Describe the bug

classes like language-javascript and language-python that are needed for syntax highlighting are not coming into effect.`

Additional context

No response

Logs

No response

[helltraitor]

Inline code highlight maybe enabled with `<code>`{lang=<lang>}

`const sum = parseInt('1')`{lang=js}

Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 
  at <ProseCode class="language-javascript" code="var num1, num2, sum;\nnum1 = prompt(\"Enter first number\");\nnum2 = prompt(\"Enter second number\");\nsum = parseInt(num1) + parseInt(num2); // \"+\" means \"add\"\nalert(\"Sum = \" + sum); // \"+\" means combine into a string\n" language="javascript"  ... > 
  at <AsyncComponentWrapper class="language-javascript" code="var num1, num2, sum;\nnum1 = prompt(\"Enter first number\");\nnum2 = prompt(\"Enter second number\");\nsum = parseInt(num1) + parseInt(num2); // \"+\" means \"add\"\nalert(\"Sum = \" + sum); // \"+\" means combine into a string\n" language="javascript"  ... > 
  at <ContentRendererMarkdown value=

This warning happens because you don't use documentDriven mode and that is fine. You can ignore it, override by component (with required properties) or omit this warnings by filtering props in passed data (:value="post" in your layout)

As for strange colors in your code block: you changes theme, but not background.
Try set dark theme on default mode and you will see.

Solution is to properly use dark modes (like I did, for example)

As a result, this is not problems of @nuxt/content, but your setup

I'm lucky man, because I define all I want by myself and can widely control stuff

.prose :where(pre):not(:where([class~="not-prose"] *)) {}

This selector applies dark background and comes from your tailwind.css
I'm not fan of it, so further solution is up on you.

[nobkd]

I have a fresh doc-driven project here: https://stackblitz.com/edit/github-gfxckn?file=nuxt.config.ts
The project is highlighted as soon as you uncomment the highlight key and the server restarts. (You might have to wait a few seconds and/or reload the content page a few times for the change to be displayed)

The Vue warn is there in both cases.
So the warning and the color not being displayed seem to be two different issues.

[bobby169]

I have the same vue warn.

[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 
  at <ProseCode class="language-html" code="<p>code styling is easy</p>\n" filename="my-first-blog-post.md"  ... > 

[bobby169]

I try to define the props class without warning again

file: components->content->ProseCode.vue

props: {
    ...otherProps,
    class: {
      type: String,
      default: "",
    }
}

[narasimhajupally]

@helltraitor The main problem is <ProseCode> component rendering multiple fragments or text root node. It should render a single root node so inheriting the class will work.

[bobby169]

render a single root node so inheriting the class will work

Yes, you are right. just adding a single root node should work fine.

[nobkd]

@farnabaz this still happens in edge-channel.
Example: https://stackblitz.com/edit/github-zbixzf?file=content%2Findex.md,package.json
Open the preview in a new tab and look in the console logs.

chunk-RAKT47ZN.js:1449 [Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 
  at <ProseCode class="language-ts" code="let x: number = 0;\n" language="ts"  ... > 
...

---

Edit: Never mind. Works fine with v2.8.2