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

13/Apr/2019, 07.12.21

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 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: normal; 
 }

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

Copy

 
 <script src="http://vifox.net/js/khung-code-2.1.1jquery.min.js"></script> 
 <script src="http://vifox.net/js/khung-code-clipboard.js"></script> 
 <script> 
 $(function(){ 
 new Clipboard('.copy-text'); 
 }); 
 </script>

Nếu javascript không hoạt động thì thay bằng link java nà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 chèn trong bà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 
 </pre> </div>

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

Code khác tùy chỉnh đơn giản không có 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 
 Ví dụ: 
 &lt;source src="mov_bbb.mp4" type="video/mp4"&gt; 
 &lt;source src="mov_bbb.ogg" type="video/ogg"&gt; 
 Lưu ý: &lt; và &gt; là thay cho dấu < > 
 </pre>

Các bạn chỉnh sao cho phù hợp với web của bạn.

Từ khóa: 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.

Administrator

Cảnh báo:

Khi bạn để lại bình luận vui lòng không spam, không dùng những từ ngữ thô tục lăng mạ người khác.
Nếu bạn coppy bài của người khác hoặc từ trang khác, xin vui lòng điền tên tác giả và nguồn của bài viết nhé...!
Các bài viết trên Share4s chỉ mang tính chất tham khảo, bạn nên cân nhắc kỹ lưỡng trước khi xem hoặc tải nội dung bài viết, cẩn thận lừa đảo và virus. Hãy quét virus trước khi cài đặt bất cứ thứ gì.
Chúng tôi sẽ không chịu trách nhiệm với các bài viết do thành viên đăng lên trên các kênh của Share4s.
Nếu trường hợp bạn phát hiện bài viết là hình thức lừa đảo hoặc nội dung bài viết sai thực tế, bạn vui lòng gửi báo cáo tới admin để được giải quyết, chúng tôi sẽ xử lý nghiêm các vấn đề vi phạm.
Share4s luôn hướng tới mục tiêu cộng đồng giao lưu vui vẻ, lịch sự, nhiệt tình.
Hãy để lại cảm nhận của bạn, chúng tôi vui vẻ đón nhận và sẽ cố gắng phát huy trang web một cách tốt nhất để phục vụ các bạn.
Cảm ơn bạn đã luôn quan tâm và ủng hộ Share4s, chúc bạn một ngày làm việc hiệu quả!

code, Khung code, website, JavaScript | 663 | Thủ thuật website

Tổng số bình luận: 0