N
Nuxt•2w ago
PetyXbron

Why I don't have formatted markdown file in Content?

I've successfully managed to get content from my markdown file through Nuxt Content module. 
<template>
    <ContentRenderer v-if="document" :value="document" />
    <div v-else>Home not found</div>
</template>

<script setup lang="ts">
definePageMeta({
    layout: 'docs',
});

const route = useRoute()
const path = "/" + route.path.split('/').slice(2).join('/')
const { data: document } = await useAsyncData(path, () => queryCollection('docs').path(path).first())
</script>
<template>
    <ContentRenderer v-if="document" :value="document" />
    <div v-else>Home not found</div>
</template>

<script setup lang="ts">
definePageMeta({
    layout: 'docs',
});

const route = useRoute()
const path = "/" + route.path.split('/').slice(2).join('/')
const { data: document } = await useAsyncData(path, () => queryCollection('docs').path(path).first())
</script>
The problem is that, the displayed text doesn't seem like a markdown formatted text. A lot of formatting and text doesn't appear. I see only bold text and citation (by tabs). What may I did wrong?
5 Replies
kapa.ai
kapa.ai•2w ago
Hi @PetyXbron. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're experiencing—where your markdown content is not fully formatted and only bold text or citations appear—likely stems from the way the <ContentRenderer> component handles "prose" styling in Nuxt Content v3. By default, <ContentRenderer> renders markdown using "Prose Components," which provide the expected HTML structure and styling for headings, lists, code blocks, etc. If the prose prop is set to false, or if your project is missing the necessary CSS for prose styling, the markdown will render as plain HTML without the rich formatting you expect. What to check: 1. Prose Prop:
Make sure you are not setting :prose="false" on <ContentRenderer>. If you want the default markdown formatting, either omit the prop or set it to true (or leave it undefined, as it defaults to enabled) ContentRenderer docs. 2. CSS for Prose Components:
The Prose Components (like <ProseH1>, <ProseP>, etc.) rely on CSS for their appearance. If you are using a custom layout or have removed default styles, you may need to ensure that the necessary CSS is included. If you use Nuxt UI Pro or Tailwind CSS, make sure the typography plugin is enabled, as it provides the required styles Nuxt UI Pro Typography. 3. Content Structure:
Ensure your markdown files are correctly structured and use standard markdown syntax. The Content module parses .md files and expects them to be in the correct format Markdown Usage. 4. Component Registration:
If you use custom Vue components in your markdown (via MDC syntax), ensure they are globally registered or placed in the correct directory, as required by Nuxt Content MDC Syntax. Example of correct usage: 
<template>
  <ContentRenderer v-if="document" :value="document" />
  <div v-else>Home not found</div>
</template>

<script setup lang="ts">
const route = useRoute()
const path = "/" + route.path.split('/').slice(2).join('/')
const { data: document } = await useAsyncData(path, () => queryCollection('docs').path(path).first())
</script>
<template>
  <ContentRenderer v-if="document" :value="document" />
  <div v-else>Home not found</div>
</template>

<script setup lang="ts">
const route = useRoute()
const path = "/" + route.path.split('/').slice(2).join('/')
const { data: document } = await useAsyncData(path, () => queryCollection('docs').path(path).first())
</script>
If you follow the above and still see only minimal formatting, double-check your global CSS and ensure you haven't disabled prose styling. If you want to customize the appearance, you can override Prose Components as described in the docs Prose Components. Summary:
Most likely, the lack of formatting is due to missing or disabled prose styles. Ensure you have the required CSS and that the prose prop is not set to false unless you intend to disable default markdown styling. If you need further help, please provide a sample of your markdown file and any custom CSS or layout changes you have made. --- References:
- ContentRenderer documentation
- Prose Components
- Nuxt UI Pro Typography ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@411436203330502658> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
PetyXbron
PetyXbronOP•2w ago
@kapa.ai oh, I just checked the dev tools. There are the right elements. It seems it's bloked by tailwind. For example, titles are all the same height:
h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}
h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}
what to do?
kapa.ai
kapa.ai•2w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- The issue is caused by the global CSS rule: 
h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}
h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}
This rule overrides the default (and Nuxt UI Pro's) heading styles, making all headings look the same. Nuxt Content and Nuxt UI Pro rely on their own classes and component styles to provide proper typography and heading hierarchy. How to fix: - Remove or override this CSS rule.
You should not set font-size: inherit; and font-weight: inherit; globally for headings if you want Nuxt Content and Nuxt UI Pro's typography to work as intended. - Let Nuxt UI Pro and Tailwind handle heading styles.
Nuxt UI Pro provides custom prose components and Tailwind classes for headings, which will be applied automatically if you don't override them with global CSS. For example, the default configuration for <ProseH1> applies text-4xl text-highlighted font-bold mb-8 and similar classes for other headings, ensuring proper visual hierarchy Nuxt UI Pro Typography. Summary:
Delete or comment out the global CSS rule for headings. This will allow Nuxt UI Pro and Tailwind to apply their intended styles, and your markdown headings will display with the correct sizes and weights. If you want to customize heading styles, do so using the Nuxt UI Pro configuration or Tailwind classes, not by globally resetting all heading elements Nuxt UI Pro Typography. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@411436203330502658> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?