Khung chứa Code sử dụng thẻ blockquote Blogspot

Để khung chứa code trông đẹp hơn, bạn có thể thêm CSS, Script vào giao diện để áp dụng cho thẻ blockquote

Thêm CSS vào trước thẻ </b:skin> của Blogger. Dưới đây là một ví dụ về CSS bạn có thể sử dụng:

Nội dung css

blockquote{background-color:#f5f5f5;font-family:Monospace;font-size:15px;line-height:20px!important;white-space:pre-wrap;margin:0;padding:10px;border:1px solid #d4d4d4;border-radius:0}

blockquote:before{content:'NHẤP ĐỂ SAO CHÉP';display:block;background-color:#4CAF50;float:left;width:calc(100% - 12px);height:30px;color:white;font-size:14px;line-height:30px;font-weight:700;margin:-5px -6px 0;padding:0 10px;border-radius:4px;box-shadow:0 2px 5px rgba(0,0,0,0.3);text-align:center;margin-bottom:10px}


Thêm JavaScript vào trước thẻ đóng </body> trong chủ đề của Blogger:

Nội dung script

<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>

Đăng nhận xét

Chat Zalo