How to use ProsePre components
I’m trying to dynamically insert a variable into a Python code block inside a
<ProsePre> component.
This is what I want to render (its working in .md file with nuxt-content but without real dynamic variable tho):
```python
import test as ts
ts.something("DYNAMIC_VARIABLE_HERE")
```
I tried the following:
The copy-to-clipboard function works, but syntax highlighting doesn’t work at all.
How am I supposed to do this correctly?
I also checked the Nuxt UI documentation, and even their own example component seems broken:
https://github.com/nuxt/ui/blob/9002f27d439f81c48e5882a3729eaeb1b66e1b18/docs/app/components/content/SupportedLanguages.vue#L76
It renders the code, but:
1. there’s no copy prop, so copying doesn't work
2. syntax highlighting should be bash, but no highlighting appears
Is this a known issue, or am I using it incorrectly?GitHub
ui/docs/app/components/content/SupportedLanguages.vue at 9002f27d43...
The Intuitive Vue UI Library powered by Reka UI & Tailwind CSS. - nuxt/ui
3 Replies
Hi @FoxCode. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the provided knowledge sources, there is no explicit documentation or example for using the <ProsePre> component directly with dynamic code and syntax highlighting in Nuxt Content or Nuxt UI. However, there are some related issues and discussions that may help clarify the situation:
1. Component Conflict and Warnings: There have been issues with duplicate ProsePre components when using both @nuxtjs/mdc and @nuxt/content, but these are resolved in recent versions. This does not directly relate to your syntax highlighting issue, but it's important to ensure you are using the latest versions of Nuxt and Nuxt Content to avoid unexpected behavior. After upgrading, run
- There is no official or documented way in the provided sources to use <ProsePre> for dynamic code with syntax highlighting. - The recommended approach for dynamic code rendering with syntax highlighting is to use a custom component that processes the code with highlight.js, as shown in the markdown rendering example. - The issues you observed with the Nuxt UI documentation example appear to be real and may indicate a limitation or bug in the current <ProsePre> implementation. If you need dynamic code rendering with syntax highlighting, consider using a custom component with markdown-it and highlight.js as shown in the sources, rather than relying on <ProsePre>. If you specifically need <ProsePre>, you may want to open an issue on the Nuxt UI repository or check for updates in their documentation. I'm sorry, but the knowledge sources do not contain enough information to provide a definitive answer or workaround for dynamic syntax highlighting with <ProsePre> at this time. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
npx nuxi upgrade --force to refresh your dependencies and lockfiles Nuxt Content component conflict.
2. Syntax Highlighting in Markdown: For rendering markdown with syntax highlighting, the recommended approach is to use markdown-it and highlight.js, or rely on @nuxt/content's built-in support. When using markdown files, code blocks with language tags (like ``python) are automatically highlighted. However, when rendering code dynamically via a component, you need to ensure the code is processed through the highlighter. The example for dynamic markdown rendering uses a custom component (HighlightedMarkdown.server.vue`) that processes the markdown string and applies syntax highlighting using highlight.js. This approach works for dynamic content and ensures SSR compatibility, but it does not use <ProsePre> directly Dynamic markdown with highlight.js.
3. <ProsePre> Usage and Issues: There is no direct documentation or example in the sources for using <ProsePre> with dynamic code and language props. Your observation about the Nuxt UI documentation example not working as expected (no copy prop, no highlighting) matches the current state of the referenced code. This suggests that either the component is not intended for direct dynamic use in this way, or there may be a bug or missing feature in the current implementation.
Summary:- There is no official or documented way in the provided sources to use <ProsePre> for dynamic code with syntax highlighting. - The recommended approach for dynamic code rendering with syntax highlighting is to use a custom component that processes the code with highlight.js, as shown in the markdown rendering example. - The issues you observed with the Nuxt UI documentation example appear to be real and may indicate a limitation or bug in the current <ProsePre> implementation. If you need dynamic code rendering with syntax highlighting, consider using a custom component with markdown-it and highlight.js as shown in the sources, rather than relying on <ProsePre>. If you specifically need <ProsePre>, you may want to open an issue on the Nuxt UI repository or check for updates in their documentation. I'm sorry, but the knowledge sources do not contain enough information to provide a definitive answer or workaround for dynamic syntax highlighting with <ProsePre> at this time. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@363971301947342848> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
cc: @Hywax @benjamincanac