Hướng dẫn tạo khung chứa code nó nút copy cực dễ cho Blogger

Thành Trương Blog

5/17/2024 03:55:47 PM

Published 2/19/2024 12:05:00 AM

Table Of Contents

Nếu bạn là một blogger về lập trình, bạn sẽ thường xuyên cần chia sẻ đoạn mã với độc giả của mình. Việc chèn đoạn mã trực tiếp vào bài viết có thể gây ra những vấn đề về định dạng và khó khăn cho độc giả khi muốn sao chép mã đó. Trong trường hợp này, một khung chứa mã có nút sao chép sẽ là một giải pháp tuyệt vời. Nó sẽ giúp cho bạn dễ dàng chèn và chia sẻ đoạn mã của mình, cũng như giúp độc giả của bạn dễ dàng sao chép mã mà không cần phải đối mặt với những khó khăn về định dạng. Hãy cùng tìm hiểu thêm về cách tạo khung chứa code có nút copy cho blogger để cải thiện trải nghiệm của bạn và độc giả của bạn.

Cách tạo khung chứa code có nút copy cho blogger cực dễ

Khung chứa code là gì?

Khung chứa code (code container) là một công cụ cho phép bạn hiển thị đoạn mã trong một khu vực độc lập, giúp cho nó dễ đọc hơn và tránh trộn lẫn với văn bản chung của bài viết. Khung chứa code thường có nền trắng và phông chữ đặc biệt để làm nổi bật đoạn mã, cũng như hỗ trợ nhiều ngôn ngữ lập trình khác nhau. Ngoài ra, một số khung chứa code còn có tính năng tạo nút copy để cho phép độc giả dễ dàng sao chép đoạn mã mà không phải lo lắng về định dạng hoặc cú pháp của nó. Khung chứa code thường được sử dụng trong các blog về lập trình, kỹ thuật hay giáo dục để chia sẻ đoạn mã một cách chuyên nghiệp và dễ hiểu hơn.

Ảnh demo khung chứa code có nút copy cho blogger (dạng 1)

Ảnh demo khung chứa code có nút copy cho blogger (dạng 2)

Cách tạo khung chứa code có nút copy cho blogger

Dưới đây là những bước hướng dẫn để các bạn có thể tự tạo một khung chứa code có nút copy vô cùng đơn giản, dễ dàng:

Khung chứa code dạng 1

Bước 1: Bạn truy cập vào trang quản trị blogger ➤ Tìm đến chủ đề ➤ Tùy chỉnh HTML
Bước 2: Sao chép đoạn code bên dưới và dán vào trên thẻ </body>

<style>
  .thanhtruongblog_CBox{position:relative;background:#fff;width:100%;border-radius:6px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;padding:10px;margin:30px 0 30px}
  .thanhtruongblog_CBox .CB_Heading{display:flex;justify-content:flex-end;align-items:center;margin-bottom:15px}
  .thanhtruongblog_CBox .C_box_main{cursor:pointer;display:inline-flex;align-items:center;padding:12px;outline:0;border:0;border-radius:50%;background:#39b6f0;transition:all .3s ease;-webkit-transition:all .3s ease}.thanhtruongblog_CBox .C_box_main:hover{opacity:.8}.thanhtruongblog_CBox .C_box_main .CBox_icn{flex-shrink:0;display:inline-block;width:18px;height:18px;background-image:url(&quot;data:image/svg+xml,<svg fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><rect height='16.45385' rx='4' width='16.45385' x='5.54615' y='5.54615'/><path d='M171.33311,181.3216v-8.45385a4,4,0,0,1,4-4H183.787' transform='translate(-169.33311 -166.86775)'/></svg>&quot;);background-size:cover;background-repeat:no-repeat;background-position:center}
  .thanhtruongblog_CBox .C_box_main.copied{background:#2dcda7}
  .thanhtruongblog_CBox .C_box_main.copied .CBox_icn{background-image:url(&quot;data:image/svg+xml,<svg fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'/><polyline points='23 3 12 14 9 11'/></svg>&quot;)}
  .thanhtruongblog_CBox pre{margin:0;background:#f6f6f6;padding:15px;border-radius:5px;color:#08102b;font-size:.8rem;font-family:monospace;overflow:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch; white-space: pre-wrap;}
  .thanhtruongblog_CBox pre::before, .thanhtruongblog_CBox pre::after{content:&#39;&#39;}
  .dark-Mode .thanhtruongblog_CBox{background:#2d2d30}.dark-Mode .thanhtruongblog_CBox pre{background:#252526;color:#fffdfc}
  .tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}
  @media screen and (max-width:500px){.tNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
  @keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
  @-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
  .darkMode .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
  </style>
<div class='tNtf' id='toastNotif'/> 
<script>/*<![CDATA[*/ function copyC(e,t){var o=document.getElementById(e),n=document.getElementById(t),e=getSelection(),t=document.createRange();e.removeAllRanges(),t.selectNodeContents(n),e.addRange(t),document.execCommand("copy"),e.removeAllRanges(),o.classList.add("copied"),document.getElementById("toastNotif").innerHTML="<span>Copied to Clipboard!</span>",setTimeout(()=>{o.classList.remove("copied")},3e3)} /*]]>*/</script>

Bước 3: Bạn ấn lưu sau đó tạo một bài viết bình thường, sau đó copy đoạn code bên dưới dán vào bài viết và xuất bản.

<div class="thanhtruongblog_CBox">
    <div class="CB_Heading">
      <button class="C_box_main" id="copy" onclick="copyC('copy','code')">
        <i class="CBox_icn"></i>
      </button>
    </div>
    <div id="code">
      <pre> BẠN DÁN ĐOẠN CODE VÀO ĐÂY</pre>
    </div>
  </div>

Tất cả đã xong rồi đó các bạn. Mỗi khi đăng bài bạn chỉ cần copy đoạn code ở bước 3 và thêm đoạn code cần chia sẻ vào là được.

Khung chứa code dạng 2

Dạng 2 cách thực hiện cũng tương tự ở dạng 1. Bạn chỉ việc copy đoạn code bên dưới và dán vào trên thẻ </body>

<style>
/**
* Highlight.js
*/
.code-badge-language {display:none}
.code-badge-copy-icon {
background: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhciIgZGF0YS1pY29uPSJjb3B5IiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtY29weSBmYS13LTE0IiByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTQzMy45NDEgNjUuOTQxbC01MS44ODItNTEuODgyQTQ4IDQ4IDAgMCAwIDM0OC4xMTggMEgxNzZjLTI2LjUxIDAtNDggMjEuNDktNDggNDh2NDhINDhjLTI2LjUxIDAtNDggMjEuNDktNDggNDh2MzIwYzAgMjYuNTEgMjEuNDkgNDggNDggNDhoMjI0YzI2LjUxIDAgNDgtMjEuNDkgNDgtNDh2LTQ4aDgwYzI2LjUxIDAgNDgtMjEuNDkgNDgtNDhWOTkuODgyYTQ4IDQ4IDAgMCAwLTE0LjA1OS0zMy45NDF6TTI2NiA0NjRINTRhNiA2IDAgMCAxLTYtNlYxNTBhNiA2IDAgMCAxIDYtNmg3NHYyMjRjMCAyNi41MSAyMS40OSA0OCA0OCA0OGg5NnY0MmE2IDYgMCAwIDEtNiA2em0xMjgtOTZIMTgyYTYgNiAwIDAgMS02LTZWNTRhNiA2IDAgMCAxIDYtNmgxMDZ2ODhjMCAxMy4yNTUgMTAuNzQ1IDI0IDI0IDI0aDg4djIwMmE2IDYgMCAwIDEtNiA2em02LTI1NmgtNjRWNDhoOS42MzJjMS41OTEgMCAzLjExNy42MzIgNC4yNDMgMS43NTdsNDguMzY4IDQ4LjM2OGE2IDYgMCAwIDEgMS43NTcgNC4yNDNWMTEyeiI+PC9wYXRoPjwvc3ZnPg==');
background-size: 100% 100%;
}
.code-badge > .code-badge-check-icon {
background: green;
}
.code-badge-check-icon {
font-size: 1.2em;
cursor: pointer;
padding: 0 7px; 
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiBmb2N1c2FibGU9ImZhbHNlIiBkYXRhLXByZWZpeD0iZmFzIiBkYXRhLWljb249ImNoZWNrIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtY2hlY2sgZmEtdy0xNiIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9IiYjMTA7ICAgIGNvbG9yOiAjMmFmZjMyOyYjMTA7Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNzMuODk4IDQzOS40MDRsLTE2Ni40LTE2Ni40Yy05Ljk5Ny05Ljk5Ny05Ljk5Ny0yNi4yMDYgMC0zNi4yMDRsMzYuMjAzLTM2LjIwNGM5Ljk5Ny05Ljk5OCAyNi4yMDctOS45OTggMzYuMjA0IDBMMTkyIDMxMi42OSA0MzIuMDk1IDcyLjU5NmM5Ljk5Ny05Ljk5NyAyNi4yMDctOS45OTcgMzYuMjA0IDBsMzYuMjAzIDM2LjIwNGM5Ljk5NyA5Ljk5NyA5Ljk5NyAyNi4yMDYgMCAzNi4yMDRsLTI5NC40IDI5NC40MDFjLTkuOTk4IDkuOTk3LTI2LjIwNyA5Ljk5Ny0zNi4yMDQtLjAwMXoiLz48L3N2Zz4=');
background-size: 100% 100%; 
}

/* 
* hljs monokai 
* https://cdnjs.com/libraries/highlight.js/
*/
.hljs-ln-numbers {-webkit-touch-callout: none !important; -webkit-user-select: none !important; -khtml-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; text-align: center !important; color: #ccc !important; border-right: 1px solid #CCC !important; vertical-align: top !important; padding-right: 5px !important; /* your custom style here */ } /* for block of code */ .hljs-ln-code {padding-left: 10px !important; } .hljs {display: block; overflow-x: auto; padding: 0.5em; background: #272822; color: #ddd; } .hljs-tag, .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-strong, .hljs-name {color: #f92672; } .hljs-code {color: #66d9ef; } .hljs-class .hljs-title {color: white; } .hljs-attribute, .hljs-symbol, .hljs-regexp, .hljs-link {color: #bf79db; } .hljs-string, .hljs-bullet, .hljs-subst, .hljs-title, .hljs-section, .hljs-emphasis, .hljs-type, .hljs-built_in, .hljs-builtin-name, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-addition, .hljs-variable, .hljs-template-tag, .hljs-template-variable {color: #a6e22e; } .hljs-comment, .hljs-quote, .hljs-deletion, .hljs-meta {color: #75715e; } .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag, .hljs-title, .hljs-section, .hljs-type, .hljs-selector-id {font-weight: bold; }

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
<script>
//<![CDATA[
/* highlight.js | https://unpkg.com/highlightjs-badge@0.1.8/highlightjs-badge.min.js */
"use strict";!function(e,o){"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?o(e,!0):function(e){if(!e.document)throw new Error("A window with a document is required");return o(e)}:o(e)}("undefined"!=typeof window?window:this,function(y,e){if("boolean"!=typeof o)var o=!1;function t(e){var o,m={templateSelector:"#CodeBadgeTemplate",contentSelector:"body",loadDelay:0,copyIconClass:"fa fa-copy",copyIconContent:"",checkIconClass:"fa fa-check text-success",checkIconContent:"",onBeforeCodeCopied:null};function t(){m.loadDelay?setTimeout(n,loadDelay):n()}function n(){if(!document.querySelector(m.templateSelector)){var e=document.createElement("div");e.innerHTML=function(){for(var e=["<style>","@media print {","   .code-badge { display: none; }","}","    .code-badge-pre {","        position: relative;","    }","    .code-badge {","        display: flex;","        flex-direction: row;","        white-space: normal;","        background: transparent;","        background: #fff;","        color: #333;","        font-size: 0.875em;","        opacity: 0.5;","        transition: opacity linear 0.5s;","        border-radius: 0 0 0 7px;","        padding: 5px 8px 5px 8px;","        position: absolute;","        right: 0;","        top: 0;","    }","    .code-badge.active {","        opacity: 0.8;","    }","","    .code-badge:hover {","        opacity: .95;","    }","","    .code-badge a,","    .code-badge a:hover {","        text-decoration: none;","    }","","    .code-badge-language {","        margin-right: 10px;","        font-weight: 600;","        color: goldenrod;","    }","    .code-badge-copy-icon {","        font-size: 1.2em;","        cursor: pointer;","        padding: 0 7px;","    }","    .fa.text-success:{ color: limegreen !important }","</style>",'<div id="CodeBadgeTemplate" style="display:none">','    <div class="code-badge">','        <div class="code-badge-language" >{{language}}</div>','        <div  title="Copy to clipboard">','            <i class="{{copyIconClass}} code-badge-copy-icon"></i></i></a>',"        </div>","     </div>","</div>"],o="",t=0;t<e.length;t++)o+=e[t]+"\n";return o}();var o=e.querySelector("style"),t=e.querySelector(m.templateSelector);document.body.appendChild(o),document.body.appendChild(t)}for(var n=document.querySelector(m.templateSelector).innerHTML,c=document.querySelectorAll("pre>code.hljs"),a=0;a<c.length;a++){var r=c[a];if(!r.querySelector(".code-badge")){for(var d="",l=0;l<r.classList.length;l++){var i=r.classList[l];if("language-"===i.substr(0,9)){d=r.classList[l].replace("language-","");break}if("lang-"===i.substr(0,5)){d=r.classList[l].replace("lang-","");break}if(!d)for(var s=0;s<r.classList.length;s++)if("hljs"!=r.classList[s]){d=r.classList[s];break}}"ps"==(d=d?d.toLowerCase():"text")?d="powershell":"cs"==d?d="csharp":"js"==d?d="javascript":"ts"==d?d="typescript":"fox"==d&&(d="foxpro");var p=n.replace("{{language}}",d).replace("{{copyIconClass}}",m.copyIconClass).trim(),u=document.createElement("div");u.innerHTML=p,u=u.querySelector(".code-badge");var g=r.parentElement;g.classList.add("code-badge-pre"),m.copyIconContent&&(u.querySelector(".code-badge-copy-icon").innerText=m.copyIconContent),g.insertBefore(u,r)}}document.querySelector(m.contentSelector).addEventListener("click",function(e){return e.srcElement.classList.contains("code-badge-copy-icon")&&(e.preventDefault(),e.cancelBubble=!0,function(e){var o=e.srcElement.parentElement.parentElement.parentElement,t=o.querySelector("pre>code"),n=t.textContent||t.innerText;m.onBeforeCodeCopied&&(n=m.onBeforeCodeCopied(n,t));var c=document.createElement("textarea");c.value=n.trim(),document.body.appendChild(c),c.style.display="block",y.document.documentMode?c.setSelectionRange(0,c.value.length):c.select();document.execCommand("copy"),document.body.removeChild(c),function(e){var o=m.copyIconClass.split(" "),t=m.checkIconClass.split(" "),n=e.querySelector(".code-badge-copy-icon");n.innerText=m.checkIconContent;for(var c=0;c<o.length;c++)n.classList.remove(o[c]);for(c=0;c<t.length;c++)n.classList.add(t[c]);setTimeout(function(){n.innerText=m.copyIconContent;for(var e=0;e<t.length;e++)n.classList.remove(t[e]);for(e=0;e<o.length;e++)n.classList.add(o[e])},2e3)}(o)}(e)),!1})}o=e,Object.assign(m,o),"loading"==document.readyState?document.addEventListener("DOMContentLoaded",t):t()}y.highlightJsBadge=t,y.module&&y.module.exports&&(y.module.exports.highlightJsBadge=t),o&&t()});

/**
* Highlight.js
*/
document.addEventListener("DOMContentLoaded", (event) => {
  var pres = document.querySelectorAll("pre>code");
  for (var i = 0; i < pres.length; i++) {
    hljs.highlightBlock(pres[i]);
  }

  /* double click */
  for (var pres = document.querySelectorAll("pre,code,kbd,blockquote,td"), i = 0; i < pres.length; i++) pres[i].addEventListener("dblclick", function() {
      var e = getSelection(),
          t = document.createRange();
      t.selectNodeContents(this), e.removeAllRanges(), e.addRange(t)
  }, !1);

  var options = {
    contentSelector: ".blog-posts",
    loadDelay:0,
    copyIconClass: "code-badge-copy-icon",
    checkIconClass: "code-badge-check-icon",
    onBeforeTextCopied: function(text, codeElement) {
      return text;   
    }
  };
  window.highlightJsBadge(options);
});   

//]]>
</script>

Sau đó bạn chỉ việc lưu lại và tiến hành đăng bài mới. Khi đăng bài bạn sử dụng đoạn code sau:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

</body>
</html>
(ĐÂY LÀ ĐOẠN CODE MINH HỌA)

Tổng kết

Tổng kết lại, khung chứa code có nút coppy là một công cụ hữu ích cho blogger về lập trình. Nó cho phép bạn chia sẻ đoạn mã một cách chuyên nghiệp và dễ hiểu hơn, đồng thời giúp độc giả của bạn dễ dàng sao chép đoạn mã mà không phải lo lắng về định dạng hoặc cú pháp của nó. Tùy vào nhu cầu sử dụng, bạn có thể tùy chỉnh khung chứa mã của mình để phù hợp với văn bản và trang web của mình. Tuy nhiên, cần lưu ý rằng sử dụng quá nhiều khung chứa code có thể làm giảm trải nghiệm đọc của độc giả, vì vậy hãy sử dụng chúng một cách hợp lý. Hy vọng rằng bài viết này đã giúp bạn hiểu thêm về khung chứa code có nút sao chép cho blogger và áp dụng thành công vào công việc của mình.

Thông tin liên hệ:

Thành Trương Blog

Chịu trách nhiệm nội dung: Nguyễn Thành Trương

Địa chỉ: Xã Tân Thành, Huyện Bình Tân, Tỉnh Vĩnh Long

Email: thanhtruongblog@gmail.com

Số điện thoại: 0973.898.830

Website: https://www.thanhtruongblog.com/

Nguồn: https://www.thanhtruongblog.com/2024/02/khung-chua-code-co-nut-copy.html