Tip And Guides Cách Tạo Khung Chứa Code Có Nút Copy Cho Blogger Cực Dễ

chiasevip · 6/3/23

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

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.

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

{tocify} $title={Nội dung bài viết}1. 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.

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:

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

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="chiasevip_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.

2.2 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/[email protected]/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){d=r.classList;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);
}

/* double click */
for (var pres = document.querySelectorAll("pre,code,kbd,blockquote,td"), i = 0; i < pres.length; i++) pres.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)

3. 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ệ:

Chia Sẻ Vip

Địa chỉ: Tân Mỹ, Tân Thành, Bình Tân, Vĩnh Long

Số điện thoại: 0973898830

Email: [email protected]

Website: https://www.chiasevip.com/

#chiasevip, #kiemtienonline, #windows, #thuthuat, #anhdep, #congnghe

Nguồn: https://www.chiasevip.com/2023/03/khung-chua-code-co-nut-copy.html

NCD_Beat · 30/6/23

cảm ơn bác nhé!

Chào mừng!

Tip And Guides Cách Tạo Khung Chứa Code Có Nút Copy Cho Blogger Cực Dễ

chiasevip

Bài viết cùng chuyên mục

NCD_Beat

Bài mới nhất

THỐNG KÊ TRỰC TUYẾN

Thống kê diễn đàn

Thành viên mới

Chào mừng!

Tip And Guides Cách Tạo Khung Chứa Code Có Nút Copy Cho Blogger Cực Dễ

chiasevip

Bài viết cùng chuyên mục

NCD_Beat

Bài mới nhất

THỐNG KÊ TRỰC TUYẾN

Thống kê diễn đàn

Thành viên mới

CỘNG ĐỒNG DIỄN ĐÀN