Chia sẻ code khung chứa code có nút copy

Hôm nay mình xin chia sẻ cách tạo khung chứa mã nguồn (code) có kèm theo nút sao chép (copy) rất tiện lợi cho người dùng. Chỉ cần bấm vào nút sao chép thì tất cả nội dung trong khung đều được lưu vào khai bộ nhớ tạm của thiết bị. Xem demo bên dưới:

<script src="http://utnhan.wap.sh/wapmaster/code/jquery.js"></script>

<script src="http://utnhan.wap.sh/wapmaster/code/clipboard.js"></script>

<script>

$(function(){new Clipboard('.copy-text');});

</script>

<div class="codeHeader">

<a class="copy-text" data-clipboard-target="#p1" href="javascript:void(0);">

<i class="fa fa-files-o"></i>📋 Copy nội dung</a>

</div>

<pre class="code" id="p1">

Nhập code vào dòng này

</pre>

Nếu cùng 1 trang mà bạn chèn nhiều khung mã nguồn thì thay thế data-clipboard-target thành #p2, #p3, #p4... tương ứng với ID: p2, p3, p4... như đoạn co de bên dưới.

<div class="codeHeader">

<a class="copy-text" data-clipboard-target="#p2" href="javascript:void(0);">

<i class="fa fa-files-o"></i>📋 Copy nội dung</a>

</div>

<pre class="code" id="p2">

Nhập code vào dòng này

</pre>