#copy code

copycat meeting copycode for the first time!~ Copycat and copycode belong to me

Some traditional doodles and a new oc qwq Taranee by @taraneedragon

Copy Code Step 3: CSS for Styling You can use the default Prism.js theme or add additional styles for the code box and buttons. // body { font-family: Arial, sans-serif; background-color: #f7f7f7; margin: 0; padding: 20px; } .code-container { position: relative; margin: 20px auto; padding: 20px; background-color: #2d2d2d; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .copy-btn { position: absolute; top: 10px; right: 10px; background-color: #4CAF50; color: white; border: none; padding: 10px 15px; font-size: 14px; cursor: pointer; border-radius: 5px; transition: background-color 0.3s ease; } .copy-btn:hover { background-color: #45a049; } Copy Code Step 4: JavaScript for Copy Functionality Add JavaScript to handle the copy-to-clipboard functionality. function copyCode(button) { var codeBox = button.previousElementSibling.querySelector("code"); var textArea = document.createElement("textarea"); textArea.value = codeBox.textContent; document.body.appendChild(textArea); textArea.select(); document.execCommand("copy"); document.body.removeChild(textArea); // Provide feedback button.textContent = "Copied!"; setTimeout(() => { button.textContent = "Copy Code"; }, 2000); } Copy Code Result: Your code box will display syntax-highlighted text for different programming languages. Users can click the "Copy Code" button to copy the code snippet to their clipboard. Demo: If you want to include other themes, check the Prism.js themes or Highlight.js themes, which offer plenty of customization options for the appearance of your code box. December 07, 2024 at 07:37PM

Copy Code Code copied! CSS (style.css): body { font-family: Arial, sans-serif; background-color: #f7f7f7; margin: 0; padding: 20px; } .code-container { position: relative; width: 100%; max-width: 600px; margin: 0 auto; background-color: #282c34; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); color: white; } code { display: block; font-family: "Courier New", monospace; font-size: 16px; color: #f8f8f2; background-color: #2d2d2d; padding: 15px; border-radius: 5px; overflow: auto; } .copy-btn { position: absolute; top: 10px; right: 10px; background-color: #4CAF50; color: white; border: none; padding: 10px 15px; font-size: 14px; cursor: pointer; border-radius: 5px; transition: background-color 0.3s ease; } .copy-btn:hover { background-color: #45a049; } .copy-feedback { position: absolute; top: 10px; left: 10px; font-size: 14px; color: #4CAF50; display: none; opacity: 0; transition: opacity 0.5s ease; } Copy Code Code copied! JavaScript (script.js): /function copyCode() { var codeBox = document.getElementById("codeBox"); var copyFeedback = document.getElementById("copyFeedback"); // Create a temporary textarea to copy text from code var textArea = document.createElement("textarea"); textArea.value = codeBox.innerText; document.body.appendChild(textArea); textArea.select(); textArea.setSelectionRange(0, 99999); // For mobile devices document.execCommand("copy"); document.body.removeChild(textArea); // Show copy feedback copyFeedback.style.display = "inline-block"; copyFeedback.style.opacity = 1; // Hide feedback after 2 seconds setTimeout(function() { copyFeedback.style.opacity = 0; setTimeout(function() { copyFeedback.style.display = "none"; }, 500); // Time for fading out }, 2000); } Copy Code Code copied! Explanation: HTML: The code element inside the pre tag is used to format the code properly, so it appears neatly with proper indentation. The button triggers the JavaScript function to copy the code. A new span element with id="copyFeedback" is used to display the "Code copied!" message to users when they click the button. CSS: The code-container is styled with a dark background and light text to mimic a real coding environment. It’s centered on the page with shadows to create a modern look. The copy-btn has a smooth transition effect on hover, which gives users a more interactive feel. The copy-feedback message will appear when the code is copied and disappear after 2 seconds, with a fade-out animation. JavaScript: Copy Functionality: The code is copied by creating a temporary textarea element, which holds the code text and allows the user to select and copy it. Copy Feedback: After copying the code, the feedback message is displayed using setTimeout to show and hide it smoothly, which adds a nice UX touch. Enhanced Features: Code Formatting: Using pre and code tags helps format the code, keeping indentation intact. User Feedback: Users receive a "Code copied!" message, which provides instant feedback that the action was successful. Smooth Animations: Button hover effects and feedback message fade-in/out animations make the interface more engaging. This code box now looks professional and has a more modern interface, making it easier for visitors to copy code and enhancing the user experience. December 06, 2024 at 02:56PM

Copy code from Stackoverflow and other similar sites.