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

Make Pre Code auto select by Double Click in Blogger

Ở một bài viết trước Iris Tips đã chia sẻ cho các bạn cách tạo một khung chứa khá đẹp mắt rồi phải không nào. Hôm nay Iris Tips 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.

Cách thực hiện

1Do 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

Xem thêm: Tạo khung chứa code đẹp - Prism Syntax Highlighter cho Blogger

2Tiế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é.

3Thê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}

4Kết quả

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm