Code highlighting not working - Nuxt 3

Environment

---

• Operating System: Linux
• Node Version: v16.17.0
• Nuxt Version: 3.0.0-rc.9-27702110.abd5dc5
• Nitro Version: 0.5.0-27700766.92d711f
• Package Manager: yarn@3.2.3
• Builder: vite
• User Config: preset, target, mode, nitro, runtimeConfig, app, css, imports, components, build, modules, vueuse, content, experimental, vite, directus
• Runtime Modules: @nuxtjs/tailwindcss, nuxt-directus, @nuxtjs/eslint-module@3.1.0, unplugin-icons/nuxt, @nuxtjs/svg@0.4.0, @vueuse/nuxt@9.1.1, @nuxt/content, @pinia/nuxt
• Build Modules: -

---

Reproduction

nuxt.config.js

  // content
  content: {
    toc: {
      depth: 2,
      searchDepth: 2
    },
    highlight: {
      // Theme used in all color schemes.
      theme: 'github-light',
      preload: ['diff', 'ts', 'js', 'css', 'java', 'groovy', 'sql', 'xml', 'json'],
    }
  },

page.vue

<template>
<ContentRenderer :value="post"/>`
</template>

<script setup>
const post = await queryContent("blog")
  .where({slug: route.params.slug})
  .findOne();
</script>

package.json

"@nuxt/content": "^2.0.1",

Describe the bug

Whatever I try, the code highlighting does not work and the document tree does not seem to get any additional classes attached.

I’m currently migrating my blog from Gridsome to Nuxt, so the markdown files are correct and already used in production.

Am I missing something?

Additional context

No response

Logs

No response

[farnabaz]

@leopoldkristjansson By default Content module does not add background or border to code blocks. What are you referring as wrapper div is part of Nuxt Typography Theme which provide a nice styling for Prose components. You can also create your custom Prose component in components/content directory, See Docs

[nberlette]

@amit-chaudhary4 I think your issue is because you’re trying to use the shiki highlighter API directly, and in the wrong place. Check out the docs on @nuxt/content Configuration. I’m a bit behind on the status of edge-channel features, but last I checked, highlighter wasn’t a configurable property under the content.markdown key path.

If you need to implement custom syntax highlighting logic the easiest route is probably to create a server-side middleware or content transformer.