Tự động bôi đen khung chứa code bằng nhấp đúp chuột

Chào bạn! Nếu bạn đã tìm đến được bài viết này thì chắc hẳn bạn là một web developer hoặc là một blogger đúng không? Ở bài viết này Khánh sẽ giới thiệu cách để blog/web của bạn thêm chuyên nghiệp hơn và thân thiện với người đọc. Thông thường, khi trích dẫn một đoạn code nào đó chúng ta thường đặt chúng trong thẻ <pre> hoặc thẻ <code>. Người đọc muốn copy đoạn code trong thẻ này chỉ cần kéo chuột bôi đen đoạn code sau đó ấn Ctrl + C là được. Nói có vẻ đơn giản nhưng với những đoạn code dài thì rất mất thời gian. Để đơn giản hơn cho việc này, bạn chỉ cần dán đoạn code sau trước thẻ </body> trong template là được.

<script type='text/javascript'> var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script> Với đoạn code này người đọc chỉ cần đơn giản là nhấp đúp chuột vào đoạn code là có thể bôi đen toàn bộ code trong khung chứa code rồi. Bạn có thể xem demo ngay trên đoạn code bên trên. Bên trên Khánh có tô đỏ chữ pre đó chính là thẻ được áp dụng. Trường hợp bạn dùng thẻ <code> thì sửa thành code

Tác giả: Khánh

Một Blogger nghiệp dư thích tìm hiểu về blogspot và các thủ thuật blog. Hy vọng từ cái nhìn của một người không chuyên có thể giúp bạn dễ dàng hơn trong con đường xây dựng Blog.

KHI TA CHIA SẺ - HẠNH PHÚC ĐƯỢC NHÂN LÊN

CÓ THỂ BẠN MUỐN XEM