Tạo khung chứa code có nút copy to clipboard cực nhẹ cho website

Xin chào các bạn, ở các bài viết trước tôi đã giới thiệu cho bạn 2 form chứa code có nút copy to clipboard + tooltip. Tuy nhiên nhược điểm của nó là mẫu code html khi viết bài rất dài dẫn đến việc bạn gặp khó khăn. Và để khắc phục điều đó ở bài viết này sẽ là 1 form cực gọn nhẹ.

Trước tiên xem demo cho phấn khởi

 DEMO
Trong bài viết này tôi sử dụng jquery 3.3.1, clipboardjs 2.0.1 và font awesome 5.0.13. Các phiên bản có thể thay đổi bạn truy cập https://cdnjs.com để cập nhật bản mới.

Lần lượt kiểm tra các thư viện và bổ sung nếu blog bạn chưa có, chèn trước thẻ </head>

<link href='https://use.fontawesome.com/releases/v5.0.13/css/all.css' rel='stylesheet' type='text/css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.1/clipboard.min.js' type='text/javascript'/>

Viết CSS

#clpmsg,
#clpmsg::before,
.clpbrd {
    position: absolute
}

pre {
    position: relative;
    border-color: #f5f5f5;
    border-style: solid;
    border-width: 1px 1px 1px 0;
    padding: 10px;
    border-left: solid 5px #4CAF50;
    font-size: 15px;
    max-height: 500px;
    overflow-y: scroll;
    white-space: pre-wrap
}

.clpbrd {
    background: #fff;
    border: 1px solid #d5d5d5;
    padding: 2px;
    border-radius: 3px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    top: 3px;
    right: 3px;
    -webkit-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    opacity: 0
}

pre .clpbrd:hover #clpmsg,
pre:hover .clpbrd {
    opacity: 1
}

pre .clpbrd:active,
pre .clpbrd:hover {
    background-color: #ddd;
    background-image: none;
    border-color: #b5b5b5;
    transition: .3s;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15)
}

pre .clpbrd:focus {
    text-decoration: none;
    border-color: #51a7e8;
    outline: 0;
    box-shadow: 0 0 5px rgba(81, 167, 232, .5)
}

#clpmsg {
    background-color: #000;
    color: #fff;
    padding: 3px 5px;
    border-radius: 3px;
    word-break: initial;
    height: 17px;
    top: -1px;
    right: 31px;
    opacity: 0;
    -webkit-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out
}

#clpmsg::before {
    content: "";
    border: 10px solid;
    top: 2px;
    border-color: transparent transparent transparent #000;
    right: 0;
    margin-right: -15px;
    width: 0;
    height: 0
}

Lưu ý có thể css của thẻ pre sẽ xung đột với css cũ trong template của bạn, có thể thêm hoặc bỏ bớt nhưng không được xóa position: relative; vả overflow-y: scroll;

Cuối cùng dán code sau trước thẻ đóng </body>

<script type='text/javascript'>//<![CDATA[
function showTooltip(elem){$("<span id='clpmsg'>Copied</span>").prependTo(elem),$(elem).children().first().delay(1e3).fadeOut(1e3,function(){$(this).remove()})}$("<button class='clpbrd' data-clipboard-action='copy' data-clipboard-target='pre code'><i class='far fa-clone'></i></button>").insertBefore("pre code");var clipboard=new ClipboardJS(".clpbrd",{target:function(trigger){return trigger.nextElementSibling}});clipboard.on("success",function(e){e.clearSelection(),showTooltip(e.trigger)});var TopOffset=parseInt($(".clpbrd").css("top"));$("pre").scroll(function(){$(".clpbrd").css({top:$(this).scrollTop()+TopOffset})});
//]]></script>

Nếu bạn dùng font awesome 4, có thể thay phần màu đỏ thành <i class='fa fa-copy'></i> hoặc bất kì icon nào bạn thích

Nếu bạn dùng clipboardjs version dưới 2.0.0 bạn cần thay ClipboardJS thành Clipboard

Lưu template lại

Khi viết bài cần chèn code vào khung bạn chuyển chế độ HTML và trình bày theo form

<pre><code>
    <!-- Đặt code đã mã hóa ở đây -->
</code></pre>

Có thể tham khảo công cụ convert code HTML.

Như vậy ưu điểm lớn nhất của form này đó là đoạn code gọi khung soạn thảo, chỉ bằng cặp thẻ code lồng trong pre bạn đã có thể gọi được form, hơn nữa cũng không cần phải chỉnh từng id như form trước tôi đã giới thiệu

Cuối cùng xin chúc bạn thành công !