Đá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ư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.

http://www.kslzone.net/2014/07/anh-thu-tu-cac-dong-trong-code.html