Are you looking to make your code snippets more appealing and user-friendly on your website?
In the world of web development, it is essential to present code snippets in an organized and visually appealing way.
One popular tool for achieving this is Prism.js, In this comprehensive tutorial, you would be guided through the process of creating stylish code blocks (box) with a handy "Copy" button using Prism.js.
Prism.js➚ is a versatile and lightweight syntax highlighter that makes code formatting beautification a breeze.
I also love going for providing a seamless user experience, and a "Copy Code" button alongside the code block should not be a miss feature to have on your site.
This button would allow users to quickly and easily copy any code you provided without having to manually select and copy the text, and making it easier for users to interact with and utilize your code snippets.
Lets move into how to integrate this on your site. This code is applicable to any blogging platform and Content Managing System (CMS) that accepts HTML Editing.
If you use Blogger, WordPress etc make your you are on HTML Edit View.
Step 1: Setting Up the HTML Structure
Let's start by creating an HTML file and setting up the necessary foundation. We'll include the essential stylesheets and scripts required for Prism.js and our copy code button functionality.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.css" rel="stylesheet"> <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: Creating the Code Block and Copy Code Button
Inside the <body> tag, let's build our code block and add the copy code button for a seamless user experience. We'll enclose our code within the <pre> element, which is in turn wrapped by the <code> tag.
<pre>
function greet() {
console.log("Hello, Sdavidprince Here!");
}
<button class="copy-code-button">Copy</button>
</pre>
Icon Option
<button class="copy-code-button"><span><i class="fas fa-copy"> </i></span></button>Step 3: Incorporating Prism.js and Copy Code Button Functionality
To make our code block syntax-highlighted, we'll include the Prism.js library and add a script to manage the copy code button's functionality.
<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;
// 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>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/prism.min.js'/>Update Note:
// Change the button text to "Copied!" for a short duration
var originalHTML = this.innerHTML;
this.innerHTML = "Copied!";
setTimeout(function() {
button.innerHTML = originalHTML;Step 4: Testing and Customization
Save your HTML file and open it in your web browser. You'll now see a beautifully styled code block with a "Copy" button. Clicking the button will copy the code to your clipboard, and the button text will momentarily change to "Copied!" to provide user feedback.
Customization:
Feel free to customize the code block styles and button styles to match your website's design. You can also explore different Prism.js themes to alter the code block's appearance according to your preferences.
Conclusion
In this tutorial, we've walked you through the process of creating attractive code blocks with a convenient "Copy" button using Prism.js. This not only enhances the readability of code snippets on your website but also offers users an effortless way to copy code examples. Experiment with various styles and themes to seamlessly integrate this feature into your web project. Happy coding!
