Double click để chọn toàn bộ vùng chứa code trong Blogger

Hôm nay AncPlayer giới thiệu cho các bạn phiên bản cập nhật mới của khung chứa code đó bằng cách thêm chứa năng "Nhấp đôi để chọn toàn bộ vùng chứa mã code". Tính năng năng khá hữu ích đối với những đoạn code dài bạn không cần phải rê chuột để bôi đen mã code nữa.

1. Do là phiên bản nâng cấp nên đầu tiên các bạn phải thực hiện đầy đủ các bước hướng dẫn của phiên bản trước rồi phải không nào
2. Tiếp theo bạn hãy chèn đoạn JS sau vào trước thẻ </body>

<script type='text/javascript'>
//<![CDATA[
for(var pres=document.getElementsByTagName("pre"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var a=getSelection(),b=document.createRange();b.selectNodeContents(this);a.removeAllRanges();a.addRange(b)},!1);
//]]>
</script> 

Lưu ý: Nếu bạn chứa mã code trong thẻ blockquote thì hãy chỉnh sửa đoạn code bên trên lại từ pre thành blockquote cho phù hợp nhé.

3. Thêm 1 chút CSS để khung chứa code thêm đẹp nào, bằng cách thêm đoạn CSS bên dưới vào trước thẻ ]]></b:skin>

 pre::after{content:'Double click to selection';padding:2px 5px;width:auto;height:auto;font-family:monospace;position:absolute;right:8px;top:8px;color:#FFFFFF;background-color:none;transition:all 0.3s ease-in-out}
pre:hover::after{opacity:0;top:-8px;visibility:visible}

Blogger Tips

https://severphim.blogspot.com/2018/08/double-click-e-chon-toan-bo-vung-chua.html

Previous Post

Next Post

Top Post