In this tutorial, we will learn how to create code blocks with a copy code button using Prism.js. Prism.js is a lightweight and extensible syntax highlighter, which allows us to beautifully format code snippets on our web pages. The addition of a copy code button will enhance the user experience by enabling users to easily copy the code to their clipboard with just a single click.
Step 1: Set Up the HTML Structure
Start by creating a new HTML file and setting up the basic structure. We’ll include the necessary stylesheets and scripts to make use of Prism.js and the copy code button functionality.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* Code block styles */ pre { position: relative; padding: 1em; background-color: #f0f0f0; border: 1px solid #ddd; border-radius: 4px; } code { display: block; font-family: "Courier New", monospace; } /* Copy code button styles */ .copy-code-button { position: absolute; top: 0.5em; right: 0.5em; padding: 0.5em 1em; font-size: 14px; background-color: #333; color: #fff; border: none; border-radius: 4px; cursor: pointer; } </style> </head> <body> |
Step 2: Create the Code Block and Copy Code Button
Inside the <body> tag, let’s create a <pre> element to represent our code block and a <button> element for the copy code button. We’ll use the <code> tag within the <pre> to wrap our code.
1 2 3 4 5 6 7 8 | <pre> function greet() { console.log("Hello, world!"); } <button class="copy-code-button">Copy</button> </pre> |
Step 3: Add Prism.js Library and Copy Code Button Functionality
To make the code block syntax-highlighted, include the Prism.js library in your HTML file. Additionally, add a script to handle the copy code button functionality.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <script> // Add click event listener to each copy code button document.querySelectorAll(".copy-code-button").forEach(function(button) { button.addEventListener("click", function() { // Get the code element var codeElement = this.parentElement.querySelector("code"); // Create a temporary textarea to copy the code var textarea = document.createElement("textarea"); textarea.value = codeElement.innerText; document.body.appendChild(textarea); // Select and copy the code textarea.select(); document.execCommand("copy"); // Remove the temporary textarea document.body.removeChild(textarea); // Change the button text to "Copied!" for a short duration var originalText = this.innerText; this.innerText = "Copied!"; setTimeout(function() { button.innerText = originalText; }, 1500); }); }); </script> </body> </html> |
Step 4: Test and Customize
Save the HTML file and open it in your web browser. You should see the code block with the copy code button. When you click the “Copy” button, the code inside the code block will be copied to your clipboard, and the button text will briefly change to “Copied!” for user feedback.
You can also see the live demo here.
Customization:
Feel free to modify the code block styles and button styles to match your website’s design. You can also use different Prism.js themes to change the code block’s appearance.
Conclusion:
In this tutorial, we’ve learned how to create code blocks with a copy code button using Prism.js. This enhances the readability of code snippets on your website and provides a convenient way for users to copy code examples. Experiment with different styles and themes to make it fit perfectly into your web project. Happy coding!