Nuxt/content doesn't work for parsing the code in md, which makes the code highlighting invalid.

[Rox-Cat]

Environment

---

• Operating System: Windows_NT
• Node Version: v18.16.1
• Nuxt Version: 3.8.2
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: [email protected]
• Builder: -
• User Config: extends, modules, content
• Runtime Modules: @nuxt/[email protected]
• Build Modules: -

---

Reproduction

In the latest version of nuxt/content, I tried to add code to md files many times, but the HTML parsing of the code was not the expected result. The code demo is as follows：

<script setup lang="ts">
const { data } = await useAsyncData('page-data', () => queryContent('/blogs/basic').findOne())
</script>

<template>
  <main>
    <ContentRenderer :value="data">
      <template #empty>
        <p>No content found.</p>
      </template>
    </ContentRenderer>
  </main>
</template>

Describe the bug

I added code content in markdown, but the code of the actual page generated by nuxt/content was only converted into a string form, just like the following picture, which could not highlight the code.

I want to convert it to the following HTML structure (just like other people's nuxt/content projects)：

I don't know how to achieve the effect of the second picture, should I install plugins or other npm packages? 😢

Additional context

No response

Logs

No response

[AssetCEO]

Could you please provide the contents of the .md file and nuxt.config.ts?

[Rox-Cat]

@AssetCEO This is the content of my .md file and nuxt.config.ts：

basic.md:

# Hello Content

```vue
<script setup lang="ts">
const { path } = useRoute()
const articles = await queryContent(path).findOne()
</script>

<template>
  <main>
    <div>
      <ContentRenderer :value="articles">
        <template #empty>
          <p>No content found.</p>
        </template>
      </ContentRenderer>
    </div>
  </main>
</template>
```

```js
const a = 1
const b = 2
```

nuxt.config.ts:

export default defineNuxtConfig({
	extends: "@nuxt-themes/typography",
	modules: ["@nuxt/content"],
	content: {
		highlight: {
			// Theme used in all color schemes.
			theme: "github-light",
		},
	},
})

The result of the web page is shown in the following figure.

The structure of HTML is like this. language-vue:

language-js:

[AssetCEO]

I created a new project to test, and the same issue occurred. However, my old project displays the code style normally. I am not sure why this is happening. I am currently investigating the cause.

[Rox-Cat]

@AssetCEO, Thank you for taking the time to help find the cause. When I run yarn build, I am prompted during the build process:

 WARN  [shikiji] transforms option is deprecated, use transformers instead

Then I run the built project, which is:node. output/server/index. mjs. The code highlighting unexpectedly returned to normal.

Although I am not sure whether the issue is caused by the above WARN, the code highlighting did take effect after running the built project.

[AssetCEO]

@Rox-Cat, your solution is a viable workaround. After building the project, code style can be displayed normally in dev mode.

It appears that this is an issue caused by the new version of shikiji. It will require an official update of @nuxt/content to resolve.

[farnabaz]

The shikiji issue is resolved in latest release, does the issue still exists in latest release(v2.10.0)?

[Rox-Cat]

@farnabaz , hello, I just tested the latest version and found that the issue no longer exists in the online playground, but in my local environment, although I updated nuxt and nuxt/content, the issue still exists. I think maybe It's caused by my local environment.🤔

[AssetCEO]

@Rox-Cat Did you delete the node_modules, .nuxt, and .output directories and the package-lock.json file before reinstalling the modules?

[Rox-Cat]

@AssetCEO Yes, I created a new nuxt project, but the problem remains the same. I have given up.😵

[ashcolor]

I am also troubled by the same issue.

As a temporary solution, I use version 2.8.2, which does not yet include shikiji.

"@nuxt/content": "2.8.2",

[n2ptune]

I also had the same issue.

In my case, it occurred after upgrading the version of @nuxt/content from 2.8.5 to 2.10.0.

It only seems to happen in my local environment (npm run dev).

[farnabaz]

Strange, Do you mind providing a reproduction? I just created a new Nuxt project and highlighting works fine in dev.

Note that, syntax highlighting is not enabled by default and you need to enable it in nuxt.config:

content: {
    highlight: {
      theme: 'github-light'
    }
  }

[ashcolor]

@farnabaz The issue can be reproduced using the following link:

https://stackblitz.com/edit/nuxt-starter-nc3ham?file=content%2Findex.md

However, as per the conversation in the mentioned thread, the problem of the highlight not being displayed does not occur on the online StackBlitz platform. The issue arises only when downloading the project to a local environment and running npm run dev.

[liuyichens]

I also have the same issue, and this problem already existed in the previous version

[seanedevane]

Confirming the same issue here, upgraded to @nuxt/content 2.10 from 2.5.2 and see the same pattern of where npm run dev local doesn't show the highlight, but a deployed build with npm run generate does. The temp fix of dropping back to content version 2.8.2 works for me as well.

[awdr74100]

Could it be related to the deprecation warning displayed during the build process?

(node:19764) [DEP0155] DeprecationWarning: Use of deprecated trailing slash pattern mapping "./" in the "exports" field module resolution of the package at C:\Users\a7894\Desktop\content-app\node_modules\shikiji\package.json imported from C:\Users\a7894\Desktop\content-app\node_modules. Mapping specifiers ending in "/" is no longer supported.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:19764) [DEP0166] DeprecationWarning: Use of deprecated double slash resolving "./dist//index.mjs" for module request ".//index.mjs" matched to "./*" in the "exports" field module resolution of the package at C:\Users\a7894\Desktop\content-app\node_modules\shikiji\package.json imported from C:\Users\a7894\Desktop\content-app\node_modules.

[ghost]

Looks like... this issue is not only related to @nuxt/content, but also @nuxt/ui. @nuxt/ui depends on shikiji too.

[Barbapapazes]

Got the issue where in dev, everything works fine but not in prod https://github.com/unjs/website/issues/261#issuecomment-1917085963

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 30 days.