Nuxt•7d ago

Missing code highlights

Hello! When I write

ts

ts

inside my app nuxt content docs it is colored properly, but when I do something like

const code = computed(() => {
  return [
    '

const code = computed(() => {
  return [
    '

ts', const schema = "hello", '

',
  ].join('\n')
})

',
  ].join('\n')
})

And then render it: <MDC :value="code" /> all highlithing is missing! WHy

8 Replies

kapa.ai•7d ago

Hi @Norbiros. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Shiki highlighting in Nuxt Content runs when Markdown is parsed into ProsePre/ProseCode components. When you build a code fence string at runtime and pass it to <MDC :value="...">, it’s treated as MDC content but won’t go through the static build-time/highlight pipeline, so the tokens aren’t colored. Code highlighting is provided by Shiki in the Content build step for ProsePre/ProseCode, not for arbitrary runtime strings rendered via MDC (Code Highlighting; ProsePre). What to do instead: - Prefer authoring code fences in content files so they’re highlighted by Shiki. You can also specify filename, language, and meta which ProsePre understands (ProsePre). - If you must render code from a string at runtime, don’t rely on Shiki; use a custom highlighter (e.g. render to HTML yourself) and inject it with v-html, or convert the string into a ProsePre-compatible component with the same props as ProsePre (code, language, filename, highlights) so the prose component handles it (Prose Components; Prose reference). If you want Shiki themes or extra languages, configure content.build.markdown.highlight in nuxt.config, but note this applies to Content’s highlighting pipeline, not dynamic MDC strings at runtime (highlight config). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

<@770620808644919307> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

NorbirosOP•7d ago

@kapa.ai whaat? So how nuxt content manages it, it is dynamic. I am creating custom websiet that gets markdown from backend and what

kapa.ai•7d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Nuxt Content’s Shiki highlighting runs when Markdown is parsed by its pipeline into Prose components (ProsePre/ProseCode). That parsing normally happens for files in your content collections or any MDC string that goes through the same parser on the server. If you just render a raw string at runtime without letting Content parse it into ProsePre/ProseCode, you won’t get Shiki styles (Prose components; ProsePre; highlight config). For dynamic Markdown coming from a backend, do one of these: - Use the Content runtime to parse that Markdown into a document and render it with ContentRenderer so it becomes Prose components (which then get highlighted). ContentRenderer renders parsed Markdown objects with Prose components (ContentRenderer).
- Or, if you’re constructing code fences as strings and feeding them directly to an MDC component, instead render a ProsePre-equivalent component by passing the same props (code, language, etc.), because ProsePre is what receives highlighted code in the Content flow (Prose components; ProsePre).
- Ensure Shiki is enabled/configured in nuxt.config via content.build.markdown.highlight for themes/langs; this affects Content’s highlighting pipeline, not arbitrary unparsed strings (highlight). If you need raw Markdown as-is, you can still fetch and display it, but you must route it through the Content parser to benefit from Shiki highlighting; otherwise, you’ll need to highlight it yourself before injecting HTML. The docs don’t provide an API example for parsing an arbitrary backend string, but the highlighting behavior is tied to Content’s parsed output and Prose components. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

<@770620808644919307> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

NorbirosOP•7d ago

@kapa.ai Show me exact code show to display content from my external backend so it is highlighted properly etc

kapa.ai•7d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I’m sorry, but the knowledge sources don’t provide an example or API to parse arbitrary Markdown strings fetched from an external backend and render them through Nuxt Content’s pipeline. Nuxt Content’s documented flow highlights Markdown that is part of defined collections and rendered via ContentRenderer; the docs show how to configure collections, query them, and render with ContentRenderer, but not how to feed external Markdown strings into that pipeline (Installation > Display your Page; ContentRenderer). What is documented and works with highlighting: 1) Put Markdown files under a collection and render with ContentRenderer:

// content.config.ts
import { defineContentConfig, defineCollection } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: 'page',
      source: '**/*.md'
    })
  }
})

// content.config.ts
import { defineContentConfig, defineCollection } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: 'page',
      source: '**/*.md'
    })
  }
})

<!-- pages/[...slug].vue -->
<script setup lang="ts">
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () =>
  queryCollection('content').path(route.path).first()
)
</script>

<template>
  <ContentRenderer v-if="page" :value="page" />
</template>

<!-- pages/[...slug].vue -->
<script setup lang="ts">
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () =>
  queryCollection('content').path(route.path).first()
)
</script>

<template>
  <ContentRenderer v-if="page" :value="page" />
</template>

This uses ProsePre/ProseCode with Shiki highlighting configured via content.build.markdown.highlight (ContentRenderer; highlight config). If you still need to display external Markdown, the docs recommend Prose components can be overridden or used, but they don’t show a supported way to run external strings through the Content parser. You would need to either: - Import your external content into a collection (e.g., via a custom source) and then render with ContentRenderer, which is the documented way to bring non-local content into collections (Custom Source). - Or handle highlighting yourself before injecting HTML (outside of Content’s pipeline), which is not covered by these sources. Because there’s no documented code for parsing arbitrary backend Markdown strings with Content, I can’t provide an exact, supported snippet from the docs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

<@770620808644919307> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Missing code highlights

Did you find this page helpful?