How to use a component within a code block?

[yuis-ice]

How to use a component within a code block in mdx?

e.g.

```
console.log("Hello, <Username />")
```

[wooorm]

You cannot, you should not, this will never be done.

Use JSX:

<pre><code>console.log("Hello, &lt;Username /&gt;")
</code></pre>

[remcohaszing]

I interpreted the question as wanting to do this:

<pre><code>console.log("Hello, <Username />")
</code></pre>

I hope having multiple interpretations of the OP helps clarify why supporting components inside MDX code blocks is too ambiguous.

[yuis-ice]

The example is just a simplification for easier understanding.
In my case, what I wanted to is to use Tailwind blur div within the code block. I'm working on a site which has paid content area, including code snippets, so I needed it.
I hope this helps.

[remcohaszing]

You may be interested in https://codehike.org/