Torchlight is a syntax highlighting service created by the legendary Aaron Francis (Thank you Aaron, it's awesome!). It generates beautiful code blocks and I love how they look. However, I wanted to take it a step further and add a "Copy to Clipboard" button to make sharing code snippets even easier. Here's how we can do it!
Most of the code blocks are generated from markdown content via Statamic's markdown parser, so it's not as simple as using <x-torchlight-code>. Instead, we have to extend Torchlight's base markdown parser to add the button.
To do this, we'll create a file in app/Extensions called TorchlightWithCopyButtonExtension.php and add an extension of the defaultBlockRenderer function. This function returns an HTML string that includes the Copy to Clipboard button and all the necessary HTML, AlpineJS and Tailwind CSS code to make it functional.
The key part is that we're wrapping the default Torchlight block renderer $torchlight($block) in an Alpine component (x-data="codeBlock"). Also included is a button which calls the copyToClipboard method from the Alpine component when clicked.
Your styling may vary of course.
Now that we've extended the Torchlight renderer, let's take a look at how the Alpine component functions.
First, we have to add an option to the Torchlight config -- torchlight.options.copyable. This option makes Torchlight send an additional (unformatted, hidden) code block back that we can use as a copy target. Big thanks to Jason Beggs for pointing this option out! It makes copying the code to the user's clipboard much simpler.
Edit your config/torchlight.php file to include the following in the options array:
Next, we'll extract the Alpine code into a reusable chunk. First, create a file placed at resources/js/codeBlock.js. This file handles the actual copying of the code to the user's clipboard and then shows the "Copied!" message to the user.
We can simply grab the textContent from the .torchlight-copy-target selector and pass it to the clipboard using navigator.clipboard.writeText from the Clipboard API. Simple AND effective!
Next, make sure to register codeBlock as Alpine.data in our app.js file.
There's one last step. We need to register our extension in the boot() method of our application's AppServiceProvider. Then, whenever we generate code blocks from markdown content, the copy button will automatically be included.
That's all there is to it! With just a few steps, we were able to enhance markdown-generated code blocks with a convenient Copy to Clipboard feature. Enjoy the new code blocks, and Happy Coding!