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

@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. 😊

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

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

got a reporo?

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

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

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

I get a error for Next.js

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

I got rid of the error and got the copy functionality by creating a react component RehypePrettyCodeCopy, adding it above the MDXContent component and commenting out the line that throws an error in the rehype-pretty transformers package with an pnpm patch.

rehypePrettyCodeCopy.tsx:

'use client';

import { useEffect, useState } from 'react';

const RehypePrettyCodeCopy = () => {
  const [isClient, setIsClient] = useState(false);
  useEffect(() => setIsClient(true), []);

  if (!isClient) {
    return null;
  }

  const copyButtons = document.querySelectorAll('.rehype-pretty-copy');

  copyButtons.forEach((button: any) => {
    button.onclick = function () {
      navigator.clipboard.writeText(this.getAttribute('data'));

      this.classList.add('rehype-pretty-copied');

      window.setTimeout(() => {
        this.classList.remove('rehype-pretty-copied');
      }, 3000);
    };
  });

  return null;
};

export default RehypePrettyCodeCopy;

pnpm patch
patches/@rehype-pretty__transformers@0.13.2.patch:

diff --git a/dist/chunk-P2G3MLOR.js b/dist/chunk-P2G3MLOR.js
index c3d5a993c95b0919c58b52b3c11f1dca11b76884..0e293693938ea995e88d0065f734f42518b7d763 100644
--- a/dist/chunk-P2G3MLOR.js
+++ b/dist/chunk-P2G3MLOR.js
@@ -19,14 +19,14 @@ function transformerCopyButton(options = {
           "aria-label": "Copy code",
           data: this.source,
           class: "rehype-pretty-copy",
-          onclick: trimWhitespace(
-            /* javascript */
-            `
-            navigator.clipboard.writeText(this.attributes.data.value);
-            this.classList.add('rehype-pretty-copied');
-            window.setTimeout(() => this.classList.remove('rehype-pretty-copied'), ${options.feedbackDuration});
-          `
-          )
+          // onclick: trimWhitespace(
+          //   /* javascript */
+          //   `
+          //   navigator.clipboard.writeText(this.attributes.data.value);
+          //   this.classList.add('rehype-pretty-copied');
+          //   window.setTimeout(() => this.classList.remove('rehype-pretty-copied'), ${options.feedbackDuration});
+          // `
+          // )
         },
         children: [
           {

@Unavi Your patch worked perfectly for me,thanks a lot :)

this is now fixed and will be part of the next release which I will do on Monday. If you want to try it now, I've released the fix to the jsr.io registry. Just uninstall the package then reinstall from jsr:

npm remove @rehype-pretty/transformers

npx jsr add @rehype-pretty/transformers

at the bottom is react / next example:

https://jsr.io/@rehype-pretty/transformers

I've had the fix for this for a couple of weeks but didn't have time to continue the plugin until now(hence why it started as experimental).

live example here with Next.js

https://d561093d.rehype-pretty-example-next.pages.dev/