Tự động bôi đen code trong thẻ pre bằng double click

Với các blog chuyên chia sẻ và viết về các thủ thuật thì việc chia sẻ các đoạn code nằm trong cặp thẻ pre là rất phổ biến. Tuy nhiên hạn chế của thủ thuật này là khi muốn copy một đoạn code bạn sẽ phải bôi đen bằng cách di chuột, nghe có vẻ không có gì khó khăn nhưng hãy thử tưởng tượng môt đoạn code dài thì bạn sẽ rất mất thời gian để có thể bôi đen hết nó.

Vậy làm thế nào để bôi đen chỉ với một cú click đúp chuột mà vẫn có thể sử dụng cặp thẻ pre quyen thuộc. bài viết sau đây sẽ hướng dẫn các bạn làm cách nào để bôi đen một đoạn code dài chỉ với cú click đúp chuột (double click)

Bạn có thể xem demo bằng cách click đúp chuột va o khung chứa code trong bài viết này nha.

» Cách thêm khung Comment Facebook vào blog.

1- Đăng nhập vào blog

2- Chọn mẫu (Template)

3- Chọn chỉnh sửa HTML (Edit HTML)

4- Thêm đoạn mã bên dưới vào trước thẻ </body>.

<script type='text/javascript'> sau đó lưu lại template
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>

5- Lưu lại và xem kết quả nha.