Docosaurus: How can you hide Copy button next to the code example?

Question

I want to do the opposite from https://gist.github.com/yangshun/55db997ed0f8f4e6527571fc3bee4675.

Can I somehow hide the Copy button from individual Code block (https://docusaurus.io/docs/markdown-features/code-blocks)?

Answer 1

Here is the answer that I've found on the Docosaurus support site.

You can use CSS to hide the button. You just need to assign "your language" to the block where you want to hide the block button.

```buttonless

You also need to add the following CSS code:

.buttonless button {
display: none;
}

Answer 2

I don't know how to make individual code block not show the copy button… Maybe to following helps you to create a way.

---

HOW TO DISABLE THE COPY BUTTON FOR ALL CODE BLOCKS

You will need to swizzle it.

1) Run:

npm run swizzle @docusaurus/theme-classic CodeBlock -- --danger

This will create a copy of the code-generator of code block inside of the directory ./src/theme/CodeBlock.

2) Navigate to the directory and open index.js.

3) Inside the file, find and remove the following — here was at the ending of the file:

[…]
<button
  ref={button}
  type="button"
  aria-label={translate({
    id: 'theme.CodeBlock.copyButtonAriaLabel',
    message: 'Copy code to clipboard',
    description: 'The ARIA label for copy code blocks button',
  })}
  className={clsx(styles.copyButton)}
  onClick={handleCopyCode}>
  {showCopied ? (
    <Translate
      id="theme.CodeBlock.copied"
      description="The copied button label on code blocks">
      Copied
    </Translate>
  ) : (
    <Translate
      id="theme.CodeBlock.copy"
      description="The copy button label on code blocks">
      Copy
    </Translate>
  )}
</button>
[…]

4) Stop (if running) and start the docusaurus service.

Now you won't see the copy button anymore!