MD files don't use the default MDX components/styles

[BlackRam-oss]

I'm using Fumadocs with Next.js to build the documentation for my game engine.

For various reasons, I had to add some ".md" files instead of ".mdx" files (the files are auto-generated, so I can't use ".mdx").

Fumadocs is able to read and render the ".md" files correctly, but it seems that the default MDX components/styles are not applied to them. The rendered output looks very different compared to ".mdx" pages.

I've attached a screenshot to better show the issue.

Is there a way to use the default MDX components (or the same styling behavior) for ".md" files as well?

[fuma-nama]

cannot reproduce, need reproduction

[fuma-nama]

You are defining collection-level MDX options at:

function createDocsCollection(dir: string, jsdoc = true) {
    return defineDocs({
        dir,
        docs: {
            schema: pageSchema,
            postprocess: {
                includeProcessedMarkdown: true,
            },
            ...(jsdoc ? {} : { mdxOptions: { format: "md" } }),
        },
        meta: {
            schema: metaSchema,
        },
    });
}

It will remove the default MDX options, you can remove mdxOptions as it's already md by default when processing .md files, or use applyMdxPreset() like the linked docs do.

[BlackRam-oss]

I think I'm getting around the underlying problem. Let me explain:

I added:

...(jsdoc ? {} : { mdxOptions: { format: "md" } }),

To lighten the load. The reason is that during the build, the PC or GitHub machine crashes due to the excessive load.

So I can remove the line, but I need to find a way to resolve the excessive workload. How can I do that?

[fuma-nama]

need more info on that then, can be due to concurrency or some plugins taking longer than expected. You can try to disable the default plugins one-by-one, until it works (e.g. rehypeCodeOptions: false, remarkImageOptions: false). That can narrow the cause.

[BlackRam-oss]

I discovered that it's caused by rehypeCodeOptions and remarkCodeTabOptions.

I'd like to create a very basic rehypeCodeOptions file just for documentation, autogenerated in .md, so I can still use rehypeCode. Would this work?

I tried the following code, but it didn't work.

import dark from "@shikijs/themes/github-dark";

export const lightRehypeCodeOptions: RehypeCodeOptions = {
    theme: dark,
    langs: ["ts", "js", "html", "tsx"],
};

[fuma-nama]

If syntax highlighting caused the performance issue, most likely it's because of their regex or the amount of code blocks hit JS runtime bottleneck. Do you have more info about the actual generated content?

Also note that lazy is true by default, set it to false explicitly if it was your intention.