How to use variables inside code block?

[KamilDev]

I'd like to use variables inside code blocks, however they always show as literal text. There doesn't seem to be any way to escape them in MDX.

I believe I have to use DynamicCodeBlock. While it does appear to work, I get a hydration error:

Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error

Expected server HTML to contain a matching <figure> in <div>.


...
  <DocsBody>
    <div>
    ^^^^^
      <MDXContent>
        ...
          <http://localhost:3000/_next/static/chunks/node_modules__pnpm_3b2af2._.js:6378:326>
            <figure>

It does appear these code blocks are highlighted on the client, as they are not highlighted until a few seconds after page load. Is it possible to pre-highlight them on the server so they are already highlighted on page load? This may fix the hydration error too.

[fuma-nama]

You probably used DynamicCodeBlock in a wrong place, please provide more details about your problem

[KamilDev]

Trying to use in a /content/docs/test.mdx file:

---
title: Test
---

import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';

export const example = 'Hello!';

<DynamicCodeBlock
  lang="javascript"
  code={`console.log('${example}');`}
/>