codeblock not showing copy button

[AkashKumar7902]

I have a codeblock in docs folder like this:

In the webpage the html is rendered with tag pre (no copy button):

The same code when pasted in a newly initialised docasaurus repo gives a html block like this(and also the codeblock contains a copy button):

[OzakIOne]

Hello could you create a repro using playground I could not reproduce your error locally

[AkashKumar7902]

@OzakIOne Sorry I didn't mention the repository in which i was getting tag pre for the codeblock with no copy button
website: https://docs.keploy.io/docs/server/windows/installation/
githubrepo: https://github.com/keploy/docs

[slorber]

This is not a minimal repro, this is your whole site that you give us to inspect.

A minimal repro is using docusaurus.new, and reproduces the issue in a sandboxed environment that does not use third-party plugins and third-party code. If you want help, you need to invest your own time to create it, and will eventually find out this way what is causing the problem.

I took a look at your site and couldn't find a reason why this is happening at first glance, but I see many reasons why it could:

• your preset dependency version is not aligned with docusaurus core version
• you use many custom remark plugins that deal with code blocks
• you have a custom module that tries to add this copy code block functionality with imperative JS code
• you have many swizzled components
• you have custom CSS

Although I don't see any of these things causing the problem, you can see that there are many reasons that can cause issues. We can't spend time to retro-engineer your site in depth so it's better if you start from a newly initialized site and create a repro.

[szczys]

I found this question searching for a similar issue that's just a bit different. I want to leave my solution here in case it is helpful to others.

You can't use substitution with triple ticks:

```
python3 -m venv ~/{props.workspace_directory}/.venv
```

If you try to put this into CodeBlocks it will work, but the code will not be highlighted and you will not have a copy button. You must treat the code as a string for the formatting to work correctly. This will render as code, with the substitution in place:

import CodeBlock from '@theme/CodeBlock';

<CodeBlock>
{ `python3 -m venv ~/${props.workspace_directory}/.venv` }
</CodeBlock>

If have multiple lines of code you can use the single ticks to treat them as lazy strings. You can also have multiple lines wrapped in curly braces and just add + "\n" before each closing curly brace to add a linefeed.

I hope this helps... figure out why my code wasn't highlighting or having a copy button drove me a little batty 😃

[slorber]

@szczys the code will not be highlighted because you didn't provide a language through a language prop as documented here: https://docusaurus.io/docs/markdown-features/code-blocks#usage-in-jsx

We render both Markdown code blocks and the <CodeBlock> component with the same code so it's not expected to see any difference in terms of syntax highlighting or copy button behavior. If you see a different behavior it's a bug and you'll have to provide us with a minimal repro using docusaurus.new

Note variable substitution in markdown code blocks is technically possible, and we might provide this out-of-the-box later. See #395

[szczys]

@slorber thanks for the reply!

I don't think it's a bug, just a syntax I didn't realize. I was using mostly oneline shell commands which, when wrapped in codeblocks without curly braces and graves will still render but incorrectly. The correct syntax is shown in this section of the docs but it took me a while to realize that was the problem.

Here's a minimal instance that shows two working CodeBlocks and one not working. I think all of this is intended behavior
(code examples in docs/index.mdx which should be the landing page): https://codesandbox.io/p/devbox/suspicious-shaw-z32t9f

[slorber]

This is how MDX works.
When in doubt, try to use the MDX playground.

The 3rd code block receives compiled markdown content as children and not just a children string.
That's why your python comment gets rendered as a h1 heading.