Tạo khung chứa code sử dụng thẻ <b>&lt;blockquote&gt;</b> tự động copy trên blogspot

Bài viết này hướng dẫn cách tạo khung chứa code đơn giản và dễ sử dụng trong bài viết của bạn trên Blogger bằng thẻ <blockquote> vì việc sử dụng thẻ <blockquote> rất thuận tiện vì blogger đã tích hợp sẵn thẻ này trong phần soan thảo trên blogspot.

Xem demo.
DEMO

Các bước thực hiện

1- Thêm css

blockquote{position:relative;display:block;background-image: linear-gradient(#f5fffa 50%, #edf5ed 50%);background-size: 100% 3rem;background-position: 0 1.5rem;background-origin: content-box;font-family:"Consolas","Courier New",Courier,Monospace;font-size:14px;white-space:pre-wrap;line-height:1.7em;padding:28px 16px 16px;border:1px solid #ddd;border-radius:2px;overflow:auto} 
blockquote:before{content:'</>';position:absolute;right:0;top:0;color:red;font-size:13px;font-weight:700;padding:0 10px;z-index:2;line-height:35px}
blockquote:hover::before{content:'Nhấp để sao chép | Click to copy | </>';position:absolute;right:0;top:0;color:red;font-size:12px;font-weight:700;padding:0 10px;z-index:2;line-height:35px}

2- Sử dụng thẻ <blockquote> trong bài viết
Khi viết bài để sử dụng thẻ <blockquote> trong bài viết của mình thì chỉ cần chọn đoạn văn bản hoặc đoạn code, rồi vào thanh công cụ chọn biểu tượng có dấu 2 nháy (Trích dẫn văn bản)
3- Tích hợp tính năng tự động sao chép nội dung
Để người đọc có thể dễ dàng sao chép nội dung từ khung chứa code bằng cách nhấp chuột trái, bạn có thể thêm một đoạn JavaScript vào trước thẻ đóng </body> trong chủ đề của Blogspot.

<script>/*<![CDATA[*/
  function copyToClipboard(blockquoteElement) {
    const codeBlock = blockquoteElement.innerText;
    navigator.clipboard.writeText(codeBlock).then(() => {
      alert("Đã sao chép vào clipboard!");
    }).catch(err => {
      console.error("Lỗi khi sao chép: ", err);
    });
  }
  document.querySelectorAll('blockquote').forEach(blockquote => {
    blockquote.addEventListener('click', function() {
      copyToClipboard(this);
    });
  });
  /*]]>*/</script>

Kết luận
Sau khi bạn đã thực hiện các bước trên, khung chứa code của bạn sẽ không chỉ đẹp mắt mà còn tiện lợi cho người đọc khi muốn sao chép nội dung. Hãy thử nghiệm và tùy chỉnh các thuộc tính CSS theo ý thích của bạn!
Tham khảo thêm:
Khung chứa code nhấp đúp chuột trái để copy tại đây
Khung chứa code nhấp chuột trái để bôi đen tại đây
Chia sẻ lại từ thietkeblogger.com.