Đánh thứ tự các dòng trong thẻ code

Tiêu đề có vẻ hơi khó hiểu nhỉ, mình cũng không biết phải đặt sao cho đúng nên thôi quất đại haha. Như bạn đã biết thì mấy blog hướng dẫn về tin học khi muốn chia sẻ bất cứ đoạn mã nào thì họ thường cho vào cặp thẻ pre. Thông thường để người dùng dễ nhìn hơn những đoạn mã mà họ chia sẻ, họ thường sử dụng Syntax Highlighter để phân chia màu sắc cũng như đánh số dòng cho đoạn mã đó.

Đánh thứ tự các dòng trong thẻ code

Nhưng mà hầu hết thì những mã nguồn Syntax Highlighter hiện tại thì chã có mấy cái nhẹ mà hoạt động nhanh được. Do đó hôm nay và các ngày sắp tới mình sẽ hướng dẫn các bạn dùng CSS và Javascript nhỏ dùng để những đoạn mã bạn chia sẻ dễ nhìn hơn mà không cần phải sử dụng qua Highlighter.

Đánh thứ tự cho các dòng trong thẻ code

Thực chất thì thủ thuật này các bạn có thể áp dụng cho tất cả mọi loại thẻ, blockquote, pre,.. nhưng mình thích tự tạo ra thẻ mới xài cho nó xôm. Đầu tiên bạn chèn đoạn css sau vào trên thẻ ]]></b:skin>
code {
  font: 12px/19px Consolas,'Andale Mono',Courier,'Courier New',monospace;
  background-color:#eee;
  color:#444;
  overflow:auto;
  margin:1em 0;
  padding:1em;
}
code , code .day-so {
  display:block;
  white-space:pre;
}
code .day-so {
  float:left;
  margin:-1em 1em -1em -1em;
  text-align:right;
  background-color:#f1f1f1;
  color:#acacac;
  padding:1em .2em 1em .2em;
  border-right:1px solid #e0e0e0;
}
code br {
  display:none;
}
code .day-so span {
  display:block;
  padding:0 .7em 0 1em;
}
code .clr {
  display:block;
  clear:both;
}
Sau khi chèn xong, tiếp tục tím đến thẻ </body> và thêm đoạn js này lên trên.
<script type='text/javascript'>
//<![CDATA[
var pre = document.getElementsByTagName('code'),
    pl = pre.length;
for (var i = 0; i < pl; i++) {
    pre[i].innerHTML = '<span class="day-so"></span>' + pre[i].innerHTML + '<span class="clr"></span>';
    var num = pre[i].innerHTML.split(/\n/).length;
    for (var j = 0; j < num; j++) {
        var line_num = pre[i].getElementsByTagName('span')[0];
        line_num.innerHTML += '<span>' + (j+1) + '</span>';
    }
}
//]]>
</script>
Chỉ như vậy là xong rồi đấy.

Lời kết

Nếu bạn không dữ dụng blockquote trong Blogger thì mình thấy bạn nên sử dụng đoạn mã này cho thẻ đó vì khá tiện dụng dễ chèn, nó nằm sẵn trong khung soạn thảo. Đơn giản để thay thế thẻ code bằng bất cứ thẻ nào bạn chỉ việc tìm và thay thế toàn bộ "code" bằng tên thẻ mà bạn muốn.

6 bình luận

  1. avatar says

    19:27 Ngày 12 tháng 07 năm 2014

    à Comment disqus và comment facebook theo bạn nên dùng cái nào để có lợi cho seo hơn ta

  2. avatar says

    20:30 Ngày 12 tháng 07 năm 2014

    Mặc định thì cả 2 đều không thẻ index được. Nhưng với thằng Disqus thì nó có tính năng sync comment, có nghĩa là có có thể tự đồng bộ với Blogger, nên Google vẫn có thể index được nhận xét trên đó. Do vậy Disqus hơn nhé.

    P/S: Có điều đôi khi disqus nó đồng bộ sai, nhận xét của bài này qua bài khác :D

  3. avatar says

    08:46 Ngày 13 tháng 07 năm 2014

    Nhưng disqus nó ảnh hưởng đến tốc độ load trang quá bạn à

  4. avatar says

    15:12 Ngày 25 tháng 04 năm 2015

    Anh có thể chỉ em cách làm thế nào để áp dụng cái code này của anh + thêm cái là có thể double click chọn tất cả code mà không phải bôi đen từ từ ạ ? Và có thể tạo ngăn cách giữa các hàng 1,2,3,4... là một gạch ngang qua ạ?

  5. avatar says

    18:24 Ngày 26 tháng 04 năm 2015

    Cái này chắc để mình ngâm coi nó dễ làm không rồi chia sẻ lại cho bạn nhé :D

  6. avatar says

    23:30 Ngày 26 tháng 04 năm 2015

    Dạ,vâng ! Nếu ngâm cứu thành công thì anh để lại comment giúp em nhé! Cảm ơn anh nhiều!

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.