The content is not displaying on the right way

[Kinfe123]

this for displaying the markdownx <MDXContent code={post.body} /> this for contentcollection config -

const posts = defineCollection({
  name: "Blogs",
  directory: "content/blogs",
  include: "*.mdx",
  schema: (z) => ({
    title: z.string(),
    description: z.string(),
    date: z.coerce.date(),
    published: z.boolean(),
    image: z.string(),
    authors: z.array(z.string())
  }),
  transform: async (document, context) => {
    const body = await compileMDX(context, document);
    return {
      ...document,
      body,
    };
  },
});

i also have used it in combination with rehype and remark plugin from fumadocs-core but the contnt is being displayed like the image below. is there any mistake i made here ?

[sdorra]

Can you double check if the imports are correct? Does the imports for MDXContent and compileMDX come from "@content-collections/*" packages? How does the body field look in .content-collections/generated/allPosts.js?

[Kinfe123]

yeah it is imported from the right packate and i crossed checked that , i also even checked the generated file and it body do have js in it but when passing to the MdxContent component that u export from react fm it is displaying like the abov one

[Kinfe123]

or let me try it with html transformer if that works out generating html.

[sdorra]

@Kinfe123 is the repository public? Or can you give me access to it? I would like to take a look at the problem myself.

[AbePlays]

@Kinfe123 FWIW I have this content-collections config that works for me.

import { defineCollection, defineConfig } from '@content-collections/core'
import { compileMDX } from '@content-collections/mdx'
import rehypePrettyCode from 'rehype-pretty-code'

export const posts = defineCollection({
  name: 'posts',
  directory: 'content/writing',
  include: '*.mdx',
  schema: (z) => ({
    title: z.string(),
    description: z.string(),
    publishedAt: z.string(),
  }),
  transform: async (document, context) => {
    const mdx = await compileMDX(context, document, {
      rehypePlugins: [[rehypePrettyCode, { theme: 'github-dark-dimmed' }]],
    })
    return { ...document, mdx }
  },
})

export default defineConfig({
  collections: [posts],
})

[sdorra]

@Kinfe123 the code you have posted looks correct, but it is possible that you've documentation issue #198

Can you double check that you use body and not content, because if you use the content instead the result looks exactly as in your screenshot.

[Kinfe123]

Now it is working by injecting html transformed file to in the Jsx as dangerouslySetInnerHTML

[sdorra]

I'm closing this issue for now, but it should also work with compileMDX. If you can provide me access to a repository where I can reproduce the issue, please reopen the issue, and I'll take a look.