Trang chủ » Bài viết » Thủ thuật web

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 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.
Khung chứa code cho web

Đ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 xenforo 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>)
Copy
 
.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>)
Copy
 
<script src="http://ibox.clan.su/track-bs/js/khung-code-2.1.1jquery.min.js"></script>
<script src="http://ibox.clan.su/track-bs/js/khung-code-clipboard.js"></script>
<script>
$(function(){
new Clipboard('.copy-text');
});

</script>

Nếu javascript không hoạt động thì thay bằng link java này
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/blogthuthuatwin10/jquery/master/clipboard.js"></script>

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

Nếu muốn chèn đoạn code 2,3, 4... thay p1 bằng p2, p3, p4...
Code khác tùy chỉnh đơn giản không có coppy:
Copy
 
<pre style="background-attachment: initial; background-clip: initial; background-color: #e9e9e9; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 3px dotted rgb(208, 208, 208); font-stretch: inherit; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; text-align: justify; vertical-align: baseline; width: auto !important; word-wrap: normal;">
Đây chứa nội dung code
Ví dụ:
&lt;source src="mov_bbb.mp4" type="video/mp4"&gt;
&lt;source src="mov_bbb.ogg" type="video/ogg"&gt;
Lưu ý: &lt; và &gt; là thay cho dấu < >
</pre>

Các bạn chỉnh sao cho phù hợp với web của bạn.

Tag: Khung chen code co chen coppy, khung chua code web moi doc la, tao khung chua code co tich hop coppy, huong dan chen khung chua code vao web, cach chen code vao bai viet, lam sao de chen code vao bai viet, code khung chua code cho web.

Danh mục: Thủ thuật web | Thêm bởi: Văn [19-10-2017] | Thẻ: css, Khung code, javascript Lượt xem: 86

Đừng quên like nếu bài viết hữu ích nhé!
   
 
Ai làm

Ai làm "người thứ 3" cũng đều ...

Dưới đây là lá thư của một người đàn ông ngoài 40 gửi cho cô nhân tình bé nhỏ mới 23 tuổi của anh ta. Họ đã hạnh phúc bên nhau trong suốt 2 năm liền. Thế nhưng, kết cục lại khiến người ta sững sờ..
Cải thiện việc mất tập tr...

Cải thiện việc mất tập tr...

Khó tập trung vào công việc, đầu óc lơ đãng, hay quên… là những biểu hiện thường thấy ở phần lớn nhân viên văn phòng.

Khi nào cảm thấy bối rối ...
0
28-06-2017

Khi đứng giữa ngã ba đường với nhiều lựa chọn, những hành động sau sẽ giúp tâm trí kiên định để có những quyết định đúng đắn

Thơ hay về vợ người - vợ ta
0
21-10-2017

Ông chồng nào mà chê vợ già, vợ xấu, không bằng vợ người ta thì các chị em bà vợ cứ cho các ông ý đọc nhé... đọc đi cho biết thế nào kaka...

Kernel for FAT Plus NTFS
0
03-07-2017

Vì sao dữ liệu xóa đi rồi mà bạn còn có thể khôi phục lại? Nhiều bạn hỏi mình câu này. Đó là vì nếu xóa dữ liệu theo cách thông thường (cho vào thùng rác rồi empty hay bấm Shirft + Delete).

Game đấu trường thú Bloody Roa...
0
01-07-2017

Tải game đấu trường thú 1 & 2 (Bloody Roar 1, 2). Đấu trường thú là một trong những game đối kháng cũ mà hay đình đám một thời. Download Bloody Roar 1,2 ngay!

hướng dẫn khắc phục lỗi wifi s...
0
19-10-2017

Hướng dẫn bạn đọc cách giải quyết triệt để vấn đề Wifi bị Limited trên Windows 10 sau khi hoàn thành việc nâng cấp. Một số người dùng sau khi tiến hành nâng cấp Windows 10 lên phiên bản November Update hoặc từ Windows 7,8.1 lên Windows 10.

Tổng bình luận: 0
avatar