Hướng dẫn tạo và chèn khung chứa code kèm nút copy vào bài viết

Khung chứa code là thành phần quan trọng và không thể thiếu đối với những blog viết về thủ thuật có bài viết dài chẳng hạn như blog của mình...

Khung chứa code là thành phần quan trọng và không thể thiếu đối với những blog viết về thủ thuật có bài viết dài chẳng hạn như blog của mình thường sử dụng các đoạn script hay chỉ đơn giản bạn muốn một nội dung nào đó nằm trong khung này cho gọn. Điều đặc biệt trong khung chứa code này có thêm cả nút copy nữa rất thuận tiện. Cái này mình thấy rất ít blog áp dụng đa số vẫn sử dụng với nền tảng wordpress hay xenfuro còn blogspot thấy rất ít. Hiểu theo cách đơn giản là <pre> và <code>.

Không nói dài dòng nữa mình đi thẳng vào nội dung chính. Trước tiên khi bạn muốn chèn nội dung nào đó bạn cứ soạn thảo bình thường xong mới chuyển qua khung soạn thảo HTML chèn nội dung vào khung. Dưới đây là hướng dẫn:

#css (trước </b:skin>)

.codeHeader {
background-color: #f5f5f5;
border: 1px solid #e0e0e0;
border-bottom: 0;
text-align: right;
padding: 2px;
}
.copy-text {
font-size: 14px;
cursor: pointer;
color: #707070;
padding: 7px 10px;
border-left: 1px solid #e0e0e0;
}
.copy-text:hover {color:#707070;}
pre.code {
display: block;
background: #f9f9f9;
max-height: 400px;
font-size: 14px;
color: black;
text-align: left;
overflow: auto;
border: 1px solid #d3d6db;
margin: auto;
padding: 16px;
line-height: 21px;
white-space: nowrap;
}

#javascript (trước </head>)

<script src="http://ift.tt/1oMJErh"></script>
<script src="http://ift.tt/2vwAlag"></script>
<script>
$(function(){
new Clipboard('.copy-text');
});
</script>

#html

<div class="codeHeader">
<a class="copy-text" data-clipboard-target="#p1" href="javascript:void(0);"><i class="fa fa-files-o"></i> Copy</a>
</div>
<pre class="code" id="p1">
Nội dụng nằm trong khung
</pre>

Nếu muốn chèn đoạn code 2,3, 4... thay p1 bằng p2, p3, p4...

Link bài viết gốctại đây