Khung code nhấp chuột bôi đen để copy đơn giản nhất

Hướng dẫn tạo khung chứa code tự động bôi đen khi nhấp chuột để copy cho blog/web phải nói là nhiều vô kể, nó đa dạng về kiểu dáng mẫu mã cũng như kèm theo các tính năng.

Nhưng ở đây chia sẻ cách tạo khung code nhấp chuột bôi đen để copy đơn giản nhất chỉ với thuần css3 ai cũng có thể tạo được cho blog của mình một cái. Nếu bạn nào có kiến thức về css thì có thể hoàn toàn tùy biến thêm cho sinh động và đẹp mắt.

Khung code này tiện lợi ở chỗ là nhấp chuột trái một lần là tự bôi đen phần code trong khung còn nếu nhấp chuột phải thì tự bôi đen và hiện cửa sổ cùng với tab có thể check copy được ngay.
DEMO
Để cài đặt tip này bạn chỉ việc bỏ css sau vào phần css của blog.

pre,code{user-select:all} 
pre,code{position:relative;display:block;background:#f1f3f5;font-family:"Consolas","Courier New",Courier,Monospace;font-size:14px;color:#333;white-space:pre-wrap;line-height:1.7em;padding:28px 16px 16px;border:1px solid #ddd;border-radius:2px;overflow:auto} 
.post pre:before{content:'</>';position:absolute;right:0;top:0;color:#656e77;font-size:11px;padding:0 10px;z-index:2;line-height:35px} 
.post pre:hover::before{content:'Nhấp chuột để bôi đen tất cả | </>';position:absolute;right:0;top:0;color:#535a62;font-size:11px;padding:0 10px;z-index:2;line-height:35px}
.is-dark pre,.is-dark code{background:#555;color:#eee}  
.is-dark .post pre:before{color:#ccc}

Khi post bài chỉ việc sử dụng mẫu

<pre>...Nội dung code đã chuyển đổi...</pre>

Nếu trường hợp code quá dài thì hạn chế chiều cao khung code để xuất hiện thanh cuộn. Ví dụ ở dưới là hạn chế chiều cao khung code ở 400px và code lúc đó sẽ như sau:

<pre style="height:400px">Code</pre>

.is-dark là class của code chế độ sáng tối cái này khác nhau tùy vào mỗi mẫu blog nên cần thay sao cho đúng với blog hiện đang sử dụng.