1. Classic
.post-body pre {
background-color: #333;
border-left: 5px solid #009688;
padding: 0;
margin: .5em auto;
}<html>
<head>
<title>Igniel</title>
</head>
<body>
....
....
</body>
</html>document.addEventListener("DOMContentLoaded", function() {
const preElements = document.querySelectorAll('pre');
preElements.forEach(pre => {
const copyButton = document.createElement('i');
copyButton.classList.add('copy');
pre.appendChild(copyButton);
// Add click event listener to copy the code content
copyButton.addEventListener('click', function() {
const codeBlock = pre.querySelector('code');
const textToCopy = codeBlock.innerText; // Get the text content of the code block
// Create a temporary input element to copy the text to clipboard
const tempInput = document.createElement('input');
tempInput.value = textToCopy;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy'); // Copy the text to clipboard
document.body.removeChild(tempInput);
// Change button style to indicate "copied"
pre.setAttribute('data-copy', 'rakesh');
pre.classList.add('copied');
// Reset the "Copied" state after 1 second
setTimeout(() => {
pre.removeAttribute('data-copy');
pre.classList.remove('copied');
}, 500); // 1 second delay
});
});
});
Post a Comment