remark-prism icon indicating copy to clipboard operation
remark-prism copied to clipboard

Support for Prism Plugin `Copy to Clipboard Button`

Open wyattowalsh opened this issue 1 year ago • 1 comments

Hi there 👋

For my Next.js app that uses MDX, I am utilizing this plugin for code blocks (w/ syntax highlighting) support within my MDX.

I would love to have the Prism extension Copy to Clipboard Button supported so that my code blocks could have a copy button.

Is this possible? I'm happy to help contribute the necessary code if someone could help point me in the right direction 🫡

Thanks and best wishes

wyattowalsh avatar Mar 05 '23 15:03 wyattowalsh

In case it helps anyone, I also ran into this and there is a pretty good solution in this online link. In your layout file you use code like this and then add some code to update <pre><code> elements:

const rootRef = useRef<HTMLDivElement>(null);
useEffect(() => {
    addCopyToClipboardButtons(rootRef);
}

You can see my PostView for an example, and adapt it further if required.

gary-archer avatar Apr 07 '24 12:04 gary-archer