syntax highlighting with copy button Blogger website
It this text i would like to point out you something really interesting which is the way to create a pleasant showcase for your code snippets, which can include a button to repeat the content to the users clipboard, using vanilla JavaScript, no libraries.
At the top of the article you'll also find out how to integrate the Highlight.js library to offer your code snippets an excellent aspect with syntax highlighting a bit like in your IDE.
<textarea cols="100" id="htmlText" readonly="" rows="20" style="background-color: #1b1b1b; color: white; height: auto; overflow: auto; resize: none; width: 100%;">
{----Enter You Code Here----}
</textarea>
<button id="htmlBtn" onclick="copyhtml()" style="background-color: #4caf50; border: none; color: white; cursor: pointer; display: inline-block; font-size: 16px; margin: 4px 2px; padding: 10px 30px; text-align: center; text-decoration: none;">Copy</button>
<script>
function copyhtml() {
const text = document.querySelector("#htmlText");
const btnText = document.querySelector("#htmlBtn");
text.select();
document.execCommand("copy");
btnText.textContent = "Copied";
setTimeout(function(){
btnText.textContent = "Copy";
}, 5000);
}
</script>
<br /><br /></div>
0 Comments