[docs] document copy button plugin

[bennycode]

Hello, I was searching on how to add a copy-to-clipboard button using rehype-pretty-code in my Astro blog. Fortunately, I stumbled upon some clues in your code:

## Available Transformers

- [`transformerCopyButton`](./src/copy-button.ts)

To make it work, I've included @rehype-pretty/transformers in my project:

npm i @rehype-pretty/transformers

Afterward, I updated the options in my astro.config.ts file:

import rehypePrettyCode, { type LineElement, type Options } from 'rehype-pretty-code';
import { transformerCopyButton } from '@rehype-pretty/transformers'

// ...

const rehypePrettyCodeOptions: Options = {
  theme: 'github-dark-dimmed',
  onVisitLine(node: LineElement) {
    // Prevent lines from collapsing in `display: grid` mode, and
    // allow empty lines to be copy/pasted
    if (node.children.length === 0) {
      node.children = [
        {
          type: 'text',
          value: ' ',
        },
      ];
    }
  },
  tokensMap: {
    fn: 'entity.name.function',
  },
  transformers: [
    transformerCopyButton({
      visibility: 'always',
      feedbackDuration: 3_000,
    }),
  ]
};

// ...

export default defineConfig({
  // https://docs.astro.build/en/guides/markdown-content/#markdown-plugins
  markdown: {
    // Disable automatic apostrophe generation: https://daringfireball.net/projects/smartypants/
    smartypants: false,
    syntaxHighlight: false,
    remarkPlugins: [remarkToc, remarkHexo],
    rehypePlugins: [[rehypePrettyCode, rehypePrettyCodeOptions]],
  },
  // ...
});

The results look amazing!

Thank you very much, Benny

[bennycode]

@o-az I noticed that the "copy" button shows fine in my local deployment but it doesn't show in my live deployment although the copy button fragment is present (tested with document.querySelector('.rehype-pretty-copy');). Do you know what could be the reason of it?

Here is my live deployment which should show the button: https://typescript.tv/hands-on/all-you-need-to-know-about-iterators-and-generators/

UPDATE: The problem was related to @playform/compress. It compresses HTML, SVG, etc. - I removed the plugin from my Astro config and now the copy to clipboard button can be viewed just fine. 😊

[nebrelbug]

Btw, the copy plugin seems to be broken for me.

[o-az]

Btw, the copy plugin seems to be broken for me.

got a reporo?

[o-az]

@bennycode glad you were able to set it up! Updated docs should be out very soon :)

[o-az]

new docs are finally in a decent-enough place. Publishing soon

[udohjeremiah]

The copy button for Next.js fails with the typical text doesn't match server rendered.

[Flysky12138]

I get a error for Next.js

Error: Expected `onClick` listener to be a function, instead got a value of `string` type.