Hướng dẫn thêm tính năng double-click để sao chép đoạn mã trong Blogger
Hướng dẫn thêm tính năng double-click để sao chép đoạn mã trong Blogger
Trong bài viết này, chúng ta sẽ học cách thêm tính năng "double-click to copy" cho các đoạn mã trong bài viết trên Blogger bằng cách sử dụng HTML, CSS và JavaScript.
Thêm HTML và CSS
Trước tiên, bạn cần thêm các đoạn mã HTML và CSS vào bài viết của mình để tạo khung chứa mã và nút sao chép:
<div class="code-container" ondblclick="copyToClipboard(this)">
<pre><code>
function helloWorld() {
console.log("Hello, world!");
}
</code></pre>
<button class="copy-button" onclick="copyToClipboard(this.parentElement)">Sao chép</button>
</div>Thêm JavaScript
Tiếp theo, thêm đoạn mã JavaScript sau vào thẻ <head> hoặc trước thẻ </body> để xử lý sự kiện sao chép:
function copyToClipboard(element) {
var range, selection, worked;
if (document.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
}
try {
document.execCommand('copy');
alert('Đoạn mã đã được sao chép!');
} catch (err) {
alert('Không thể sao chép đoạn mã');
}
}Kết Luận
Sau khi thêm đoạn mã HTML, CSS và JavaScript vào bài viết của mình, bạn đã có thể sử dụng tính năng "double-click to copy" cho các đoạn mã trong bài viết trên Blogger. Điều này giúp người đọc dễ dàng sao chép đoạn mã mà không gặp khó khăn.
Post a Comment