Thẻ PRE với màu xen kẽ giữa các dòng

Gần đây thì mình đã có một bài viết hướng dẫn "đánh thứ tự các dòng trong thẻ code" giúp cho việc khách truy cập dễ nhìn hơn những đoạn mã mà chúng ta chia sẻ. Thì bài viết đó mình cũng đã nói ra mình sẽ chia sẻ thêm nhiều cách thức mà bạn có thể làm để đoạn mã dễ nhìn hơn mà không cần đụng tới Syntax Highlighter nặng nề. Và bài viết này lại tiếp tục mình sẽ hướng dẫn các bạn tạo thẻ pre với màu nên xen kẽ như blog của mình hiện tại.

Thẻ PRE với màu xen kẽ giữa các dòng

Thủ thuật này mình chỉ sử dụng CSS để làm thôi, cách thức mình làm là chèn một ảnh background hai màu xen kẽ với kích thước định sẵn, sau đó quy định lại chiều cao của các dòng chữ có bên trong nó cho đúng kích thước với các dòng màu có trên background đó. Thì mọi thứ mình đã làm sẵn rồi, các bạn chỉ việc tìm đến thẻ ]]></b:skin> và chèn đoạn css này lên trên để sử dụng.

pre {
border: 1px solid #636363;
background: url("http://1.bp.blogspot.com/-W23tmwuLEA8/U5G3vwIYfyI/AAAAAAAACRM/pQIfOzg2mWk/s1600/pre.png") repeat top;
color: #888888;
display: block;
font: 12px/19px Consolas,'Andale Mono',Courier,'Courier New',monospace;
margin: 10px 0;
overflow: auto;
padding: 19px 19px 17px;
}

ở đoạn mã trên thì bạn sẽ có màu trắng xen kẽ với bạc, và font chữ màu bạc nếu bạn không thích màu chữ nhạt thì bạn có thể thay đổi lại ở thuộc tính color bằng màu mà bạn yêu thích. Còn nếu không thích màu nền thì bạn có thể mở các phần mềm chỉnh sửa ảnh để đổ lại màu cho background đó.

Lời kết

Đây là một trong những thủ thuật chỉ sử dụng css nhưng khá là hiệu quả trong việc làm cho khách truy cập dễ dàng đọc hiểu đoạn mã đó hơn. Nếu bạn nào cần hỗ trợ cho việc chỉnh sửa cứ để lại nhận xét phía dưới cho mình.