CodeBlock render code without theme

[Ali-Hussein-dev]

Need to pass dynamic content to CodeBlock but the code snippet lose the theme,

import { getCodeBlock } from '@/lib/code-block';
import { Pre, CodeBlock } from 'fumadocs-ui/components/codeblock';

export async function CodeSnippet() {
  const code = await getCodeBlock('/src/components/footer.tsx');
  return (
    <CodeBlock>
      <Pre>{code.body}</Pre>
    </CodeBlock>
  );
}

// mdx file
import {CodeSnipeet} from "...."
<CodeSnippet />

The code snippet looks like this and I haven't touched MDX component.

[fuma-nama]

Hmm guess you misunderstood what the component does. It styles the output of Rehype Code (our tiny wrapper over Shiki), and you are supposed to use it with Markdown/MDX.

Your usage requires syntax highlighting with Shiki and render the Hast tree with code block component.

I would suggest you to take a look at our source code of landing page, or see Shiki's Next.js integration guide (as I wrote it, I can confirm it's correct)

[Ali-Hussein-dev]

Can you share the link to Shiki's Next.js integration guide?

[fuma-nama]

See their docs ;)