Highlight Js Tích Hợp Clipboard Cho Khung Chứa Code Của Blogspot

Đặng Tiến Sĩ Tác giả:
Xuất bản: Chủ Nhật, 23 tháng 12, 2018 -

Clipboard và Highlight Js là một trong những Plugin và Jquery giúp bạn có thể dễ dàng chia sẻ những đoạn code lên web, với những dòng code màu sắc và đẹp mắt. Kèm theo đó là sự tích hợp của Clipbroad nữa. Giúp có thể dễ dàng sao chép code chỉ với 1 click chuột.
Hello mọi người, thì hôm nay mình sẽ chia sẻ cho cách tạo Clipboard hay còn gọi là (Sao chép tạm thời) bằng js được tích hợp với khung chứa code của Highlight nhé.

Clipboard và Highlight Js là một trong những Plugin và Jquery giúp bạn có thể dễ dàng chia sẻ những đoạn code lên web, với những dòng code màu sắc và đẹp mắt. Kèm theo đó là sự tích hợp của Clipbroad nữa. Giúp có thể dễ dàng sao chép code chỉ với 1 click chuột.

Thì cái Highlight các bạn có thể tham khảo trên blog của mình tại đây, Thì mình sẽ chỉ nốt luôn nhé, khỏi vòng do nữa.

Các bước thực hiện


Truy cập trang quản trị Blogger, thêm toàn bộ bên dưới vào trước thẻ </head> trong Template.
<!--css và js của highlight-->
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<!--end-->
<!--js tích hợp clipboard-->
<script type='text/javascript'>
//Bản Quyền Của Sĩ Ben IT ! vui lòng không xoá dòng này ! site: www.sibenit.net
//<![CDATA[
var _0x88fc=["\x74\x65\x78\x74","\x63\x6C\x61\x73\x73","\x61\x74\x74\x72","\x26\x61\x6D\x70\x3B","\x72\x65\x70\x6C\x61\x63\x65","\x26\x6C\x74\x3B","\x26\x67\x74\x3B","\x26\x71\x75\x6F\x74\x3B","\x26\x23\x30\x33\x39\x3B","\x3C\x63\x6F\x70\x79\x20\x63\x6C\x61\x73\x73\x3D\x22","\x22\x3E","\x3C\x2F\x63\x6F\x70\x79\x3E","\x68\x74\x6D\x6C","\x65\x61\x63\x68","\x70\x72\x65","\x68\x69\x67\x68\x6C\x69\x67\x68\x74\x42\x6C\x6F\x63\x6B","\x63\x6F\x70\x79","\x72\x65\x61\x64\x79","\x70\x72\x65\x20\x63\x6F\x70\x79","\x3C\x62\x75\x74\x74\x6F\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x6F\x70\x79\x63\x6F\x64\x65\x22\x20\x61\x6C\x74\x3D\x22\x53\u0129\x20\x42\x65\x6E\x20\x49\x54\x20\x42\x6C\x6F\x67\x67\x65\x72\x20\x2D\x20\x77\x77\x77\x2E\x73\x69\x62\x65\x6E\x69\x74\x2E\x6E\x65\x74\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x53\u0129\x20\x42\x65\x6E\x20\x49\x54\x20\x42\x6C\x6F\x67\x67\x65\x72\x20\x2D\x20\x77\x77\x77\x2E\x73\x69\x62\x65\x6E\x69\x74\x2E\x6E\x65\x74\x22\x3E\x3C\x69\x20\x63\x6C\x61\x73\x73\x3D\x22\x66\x61\x20\x66\x61\x2D\x63\x6C\x69\x70\x62\x6F\x61\x72\x64\x22\x3E\x3C\x2F\x69\x3E\x20\x43\x6F\x70\x79\x3C\x2F\x62\x75\x74\x74\x6F\x6E\x3E","\x62\x65\x66\x6F\x72\x65","\x73\x65\x6C\x65\x63\x74\x54\x65\x78\x74","\x66\x6E","\x6C\x6F\x67","\x63\x72\x65\x61\x74\x65\x54\x65\x78\x74\x52\x61\x6E\x67\x65","\x62\x6F\x64\x79","\x6D\x6F\x76\x65\x54\x6F\x45\x6C\x65\x6D\x65\x6E\x74\x54\x65\x78\x74","\x73\x65\x6C\x65\x63\x74","\x67\x65\x74\x53\x65\x6C\x65\x63\x74\x69\x6F\x6E","\x63\x72\x65\x61\x74\x65\x52\x61\x6E\x67\x65","\x73\x65\x6C\x65\x63\x74\x4E\x6F\x64\x65\x43\x6F\x6E\x74\x65\x6E\x74\x73","\x72\x65\x6D\x6F\x76\x65\x41\x6C\x6C\x52\x61\x6E\x67\x65\x73","\x61\x64\x64\x52\x61\x6E\x67\x65","\x43\x6F\x70\x79","\x65\x78\x65\x63\x43\x6F\x6D\x6D\x61\x6E\x64","\x72\x65\x6D\x6F\x76\x65\x52\x61\x6E\x67\x65","\x65\x6D\x70\x74\x79","\x73\x65\x6C\x65\x63\x74\x69\x6F\x6E","\x66\x69\x6E\x64","\x70\x61\x72\x65\x6E\x74","\x3C\x69\x20\x63\x6C\x61\x73\x73\x3D\x22\x66\x61\x20\x66\x61\x2D\x73\x70\x69\x6E\x6E\x65\x72\x20\x66\x61\x2D\x70\x75\x6C\x73\x65\x22\x3E\x3C\x2F\x69\x3E\x20\x43\x6F\x70\x69\x65\x64","\x63\x6C\x69\x63\x6B","\x2E\x63\x6F\x70\x79\x63\x6F\x64\x65"];$(document)[_0x88fc[17]](function(){$(_0x88fc[14])[_0x88fc[13]](function(){var _0xa4acx1=$(this)[_0x88fc[0]]();var _0xa4acx2=$(this)[_0x88fc[2]](_0x88fc[1]);_0xa4acx1= _0xa4acx1[_0x88fc[4]](/&/g,_0x88fc[3]);_0xa4acx1= _0xa4acx1[_0x88fc[4]](/</g,_0x88fc[5]);_0xa4acx1= _0xa4acx1[_0x88fc[4]](/>/g,_0x88fc[6]);_0xa4acx1= _0xa4acx1[_0x88fc[4]](/"/g,_0x88fc[7]);_0xa4acx1= _0xa4acx1[_0x88fc[4]](/'/g,_0x88fc[8]);$(this)[_0x88fc[12]](_0x88fc[9]+ _0xa4acx2+ _0x88fc[10]+ _0xa4acx1+ _0x88fc[11])});$(_0x88fc[16])[_0x88fc[13]](function(_0xa4acx3,_0xa4acx4){hljs[_0x88fc[15]](_0xa4acx4)})});$(document)[_0x88fc[17]](function(){var _0xa4acx5=$(_0x88fc[18]),_0xa4acx6=_0x88fc[19];_0xa4acx5[_0x88fc[20]](_0xa4acx6)});(function(_0xa4acx6){_0xa4acx6[_0x88fc[22]][_0x88fc[21]]= function(){var _0xa4acx7=document;var _0xa4acx8=this[0];console[_0x88fc[23]](this,_0xa4acx8);if(_0xa4acx7[_0x88fc[25]][_0x88fc[24]]){var _0xa4acx5=document[_0x88fc[25]][_0x88fc[24]]();_0xa4acx5[_0x88fc[26]](_0xa4acx8);_0xa4acx5[_0x88fc[27]]()}else {if(window[_0x88fc[28]]){var _0xa4acx9=window[_0x88fc[28]]();var _0xa4acx5=document[_0x88fc[29]]();_0xa4acx5[_0x88fc[30]](_0xa4acx8);_0xa4acx9[_0x88fc[31]]();_0xa4acx9[_0x88fc[32]](_0xa4acx5);document[_0x88fc[34]](_0x88fc[33])}}};_0xa4acx6[_0x88fc[22]][_0x88fc[35]]= function(){if(window[_0x88fc[28]]){if(window[_0x88fc[28]]()[_0x88fc[36]]){window[_0x88fc[28]]()[_0x88fc[36]]()}else {if(window[_0x88fc[28]]()[_0x88fc[31]]){window[_0x88fc[28]]()[_0x88fc[31]]()}}}else {if(document[_0x88fc[37]]){document[_0x88fc[37]][_0x88fc[36]]()}}}})(jQuery);$(document)[_0x88fc[17]](function(){$(_0x88fc[42])[_0x88fc[41]](function(){var _0xa4acx5=$(this)[_0x88fc[39]]()[_0x88fc[38]](_0x88fc[16]),_0xa4acx6=$(this),_0xa4acxa=_0x88fc[40],_0xa4acxb=_0xa4acx6[_0x88fc[12]]();_0xa4acx5[_0x88fc[21]]();_0xa4acx6[_0x88fc[12]](_0xa4acxa);setTimeout(function(){_0xa4acx6[_0x88fc[12]](_0xa4acxb);_0xa4acx5[_0x88fc[35]]()},1000)})})
//]]>
</script>
<!--end-->
<style>
.copycode {
    font-size: 11px;
    position: absolute;
    color: #fff!important;
    background-color: #339af0;
    width: 55px;
    height: 21px;
    border-radius: 3px;
    border: none;
    display: block;
    top: 10px;
    right: 10px;
    font-weight: 500;
}
.post pre {
    position: relative;
    white-space: pre-line;
    background: #f4f4f4;
    margin: 5px 0;
}
.hljs {
    white-space: pre-line;
    max-height: 500px;
    overflow: auto;
    display: block;
    overflow-x: auto;
    padding: .5em;
    color: #abb2bf;
    background: #f4f4f4;
}
</style>

Sau đó lưu mẫu và xem thành quả nhé.

Cách sử dụng


Các bạn đặt code cần làm nổi bật vào giữa thẻ <pre> như này:

CSS
<pre class='css'>
<!-- nếu code là CSS -->
</pre>

Javascript
<pre class='javascript'>
<!-- nếu code là javascript -->
</pre>

HTML
<pre class='xml'>
<!-- nếu code là các thẻ HTML -->
</pre>

Ngoài ra bạn củng có thể thay đổi các mẫu nền. Bằng cách truy cập vào đây highlight js

Lời kết

Chúc các bạn thành công. có gì thắc mắc cứ comment phía dưới nhé. Đoạn Js này tự chế nên khá ngon đấy !!!! Demo như blog mình lun nhé :P

Tag:
0 Like
0 Comment More Emoticon
0 Nhận xét
Sắp xếp theo



Không có nhận xét nào. bạn hãy là người đầu tiên.


Bài Viết Có Thể Xem

THÔNG BÁO

Biên tập nội dung: Đặng Tiến Sĩ
Sĩ Ben IT Blogger giữ bản quyền nội dung trên website này
Chỉ được phát hành lại nội dung khi có sự đồng ý của chủ sở hữu
Mọi thư từ góp ý vui lòng gửi về địa chỉ dangtiensi.vn@gmail.com

Đóng Liên hệ

Thông báo của Admin