How to create a code block in blogger or any html site
copy code
given below the code
<style>
.code {
background-color: #1e1e1e;
color: #f8f8f2;
padding: 1em;
overflow: auto;
position: relative;
}
.copy-btn {
background-color: #1e1e1e;
color: #ffffff;
border: none;
padding: 0.5em 1em;
cursor: pointer;
position: absolute;
top: 0.5em;
right: 0.5em;
}
.copy-btn:hover {
background-color: #ffffff;
color: #1e1e1e;
}
.copy-msg {
position: absolute;
top: 0.5em;
left: 50%;
transform: translateX(-50%);
padding: 0.5em;
background-color: #1e1e1e;
color: #ffffff;
border-radius: 4px;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.copy-msg.show {
opacity: 1;
}
.code pre {
font-size: 14px;
line-height: 1.5;
word-wrap: break-word;
background-color: #1e1e1e;
color: #f8f8f2;
border: none;
margin: 0;
padding: 0;
}
.code code {
font-size: 14px;
font-family: Consolas, Monaco, 'Andale Mono', monospace;
color: #f8f8f2;
}
</style>
<div class="code">
<pre>
<code>
copy button
</code>
</pre>
<button class="copy-btn" onclick="copyToClipboard(this)">Copy</button>
<div class="copy-msg">Copied to clipboard!</div>
</div>
<script>
function copyToClipboard(button) {
var code = button.previousElementSibling.innerText;
navigator.clipboard.writeText(code).then(function() {
console.log('Copied to clipboard: ' + code);
button.nextElementSibling.classList.add('show');
setTimeout(function() {
button.nextElementSibling.classList.remove('show');
}, 1500);
}, function() {
console.error('Failed to copy to clipboard');
});
}
</script>
0 Comments