Docusaurus：如何隐藏代码示例旁边的复制按钮？

Question

我想做与https://gist.github.com/yangshun/55db997ed0f8f4e6527571fc3bee4675相反的事情。

我能以某种方式隐藏单个代码块 (https://docusaurus.io/docs/markdown-features/code-blocks) 中的复制按钮吗？

Answer 1

我不知道如何让个人code block不显示复制按钮...也许下面可以帮助您创建一个方法。

如何禁用所有代码块的复制按钮

您将需要 swizzle 它。

1) 运行:

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

这将在目录 ./src/theme/CodeBlock.

中创建 code block 的代码生成器的副本

2) 导航到目录并打开 index.js.

3) 在文件中，找到并删除以下内容 — 这是文件末尾的内容：

[…]
<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) 停止（如果运行）并启动 docusaurus 服务。

现在您不会再看到复制按钮了！

Answer 2

这是我在 Docosaurus support site 上找到的答案。

您可以使用CSS隐藏按钮。您只需要将“您的语言”分配给要隐藏块按钮的块。

```buttonless

您还需要添加以下CSS代码：

.buttonless button {
display: none;
}

Docusaurus：如何隐藏代码示例旁边的复制按钮？

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

markdown

block

docusaurus