ProsePre/ProseCode lack syntax highlighting when used directly in templates

[frankdeno]

Frank

Hola everyone,

I really struggled to render an MDC Component with simple text inside our component as well.

The Problem

I expected when I write:
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro']
})
```

I expected to render the component, but it didn't work. It never retrieved syntax highlighting.

Research Done

I made some research, but they didn't help either:

• Artifact 1
• Artifact 2

What I Want

The reason is that I want to have a nice showcase component without creating an extra markdown file in my content folder—a nice self-contained component that uses the MDC component.

Because I want to keep everything super lean, I didn't want to mess around too much with my codebase. After a while, I think that's actually an issue and it's not on my side, or maybe I am wrong, who knows.

Anyway, that's why I am firing up this issue here.

---

Thanks for reading :)

Best regards,
Frank

CLAUDE: Bug Report for Nuxt UI Pro GitHub Issue

Title

ProsePre/ProseCode components lack syntax highlighting when used directly in Vue templates + MDC endpoint issues with Nuxt 4

Environment

• Nuxt: 4.0.3
• @nuxt/ui-pro: 3.3.0
• @nuxt/content: 3.6.3
• @nuxtjs/mdc: 0.9.5
• Node: v20+

Reproduction

Repository/StackBlitz link: [Provide minimal reproduction]

Description

When using Prose components (ProsePre, ProseCode) directly in Vue templates for displaying code blocks, syntax highlighting doesn't work despite proper configuration. Additionally, using MDC component with language specifiers causes 404 errors for non-existent /api/_mdc/highlight endpoint.

Current Behavior

Issue 1: No Syntax Highlighting with Direct Prose Component Usage

<template>
  <ProsePre language="typescript" :code="codeExample">
    <code>{{ codeExample }}</code>
  </ProsePre>
</template>

<script setup>
const codeExample = `// TypeScript code here`
</script>

Result: Renders as plain monospace text without syntax highlighting colors

Issue 2: MDC Component Endpoint Errors

<template>
  <MDC :value="markdownContent" tag="div" />
</template>

<script setup>
const markdownContent = `
\`\`\`typescript [filename.ts]
// Code here
\`\`\`
`
</script>

Result: Console errors:

WARN [Vue Router warn]: No match found for location with path "/api/_mdc/highlight?code=..."

Expected Behavior

1. ProsePre/ProseCode should apply Shiki syntax highlighting when used directly in templates
2. MDC component should handle dynamic markdown strings with language specifiers without attempting to fetch non-existent endpoints

Root Cause Analysis

Based on investigation:

1. Prose Components Issue: When used directly in templates, Prose components bypass the MDC/Nuxt Content preprocessing pipeline where Shiki syntax highlighting is applied. They only receive raw text and apply styling (monospace font, background) but not token-level syntax coloring.

2. MDC Endpoint Issue: The /api/_mdc/highlight endpoint doesn't exist in Nuxt Content v3 (uses build-time processing). This appears to be a compatibility issue between Nuxt 4.0.3 and current MDC/Content modules when processing dynamic markdown strings.

Workaround

Currently working around by using MDC without language specifiers:

const markdownContent = `
\`\`\`
// Code without language specifier
\`\`\`
`

Suggested Solutions

1. For Prose Components:

   • Add runtime Shiki processing capability for direct template usage
   • Or document that these components require preprocessed content
   • Consider exposing a useShikiHighlight composable for manual highlighting

2. For MDC Component:

   • Fix compatibility with Nuxt 4 for dynamic markdown processing
   • Implement proper runtime highlighting without endpoint dependency
   • Or provide clear configuration to enable runtime highlighting

Additional Context

This impacts developers trying to display syntax-highlighted code blocks on landing pages or documentation without using file-based content. The issue is particularly problematic for dynamic content from APIs or user input.

The research shows this is a fundamental architectural limitation where:

• Nuxt Content v3 processes syntax highlighting at build time for file-based content
• Dynamic string content doesn't go through this preprocessing pipeline
• The MDC component attempts to use a runtime API that doesn't exist in v3

Steps to Reproduce

1. Create a fresh Nuxt 4 project with UI Pro
2. Add @nuxt/content and @nuxtjs/mdc modules
3. Try to use ProsePre with language prop in a component
4. Observe no syntax highlighting
5. Switch to MDC with language specifiers
6. Observe console errors about missing endpoint

Configuration Used

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@nuxt/eslint", "@nuxt/ui-pro", "@nuxt/content", "@nuxtjs/mdc", "@nuxt/icon"],
  uiPro: {
    mdc: true
  },
  content: {
    build: {
      markdown: {
        highlight: {
          theme: {
            default: 'github-light',
            dark: 'github-dark'
          },
          langs: ['ts', 'js', 'json', 'bash', 'vue', 'html', 'css', 'md', 'yaml']
        }
      }
    }
  },
  mdc: {
    highlight: {
      theme: {
        default: 'github-light',
        dark: 'github-dark'
      },
      langs: ['typescript', 'javascript', 'json', 'bash', 'vue', 'html', 'css', 'markdown', 'yaml'],
      wrapperStyle: true
    },
    components: {
      prose: true
    }
  }
})

---

Impact: Medium-High - Affects all developers trying to use syntax highlighting for dynamic code content

Workaround Available: Yes, but limited (no language-specific highlighting)

Checklist

• I have searched existing issues
• I have provided a minimal reproduction
• I have included all relevant error messages
• I have tested with latest versions

[HugoRCD]

you can use this syntax:

<template>
  <MDC :value="markdownContent" tag="div" />
</template>

<script setup>
const markdownContent = `
\`\`\`typescript [filename.ts]
// Code here
\`\`\`
`
</script>

and put this in your nuxt.config.ts:

mdc: {
    highlight: {
      noApiRoute: false
    }
  },